To use the Thumbr.io uploader, you have to import the css and the js library of dropzone.
To use our uploader it is necessary to make use of the thumbrio.uploader.js. The next example will use the uploading restrictions specified in Upload Default Settings. Assure you have the option Enable uploads marked. In the next section this piece of code will be detaily explained.
Finally, you have to insert your uploader in your html. As our plugin use dropzone, it
is very important not to forget to add the class
dropzone in our uploader.
If you have follow these steps carefully you will get an uploader like this.
If you are going to use your own amazon bucket it is very important to follow the next steps:
- Go to your amazon s3 bucket
- Select the bucket you are going to use, click on Properties and then click on Edit CORS configuration
- Make sure you have the next tags in the xml file:
In this section will be detaily explained all the functions we have employed. Let's start by the constructor
The constructor have two arguments: The first one is the HTML Elements or a single HTML Element that will be used as an uploader. The second one is a dictionary with the options to initialize the object Dropzone. To consult all these options visit the official web of dropzone.
Note: You are forced to specificed the option
url, but our plugin will initialize it according to your settings. So
we recommend to leave this option in blank.
This function has two arguments: The first one is the api key of the user. The second one is a dictionary with the options explained in the next table.
|onSuccessUpload||function (url, file)||This function will be run if the file was uploaded correctly. The first argument is the URL where the image is and the second argument is the file object.|
|onErrorUpload||function (url, file)||This function will be run if the file was not uploaded correctly. The first argument is the URL where the image is supposed to be and the second argument is the file object.|
|filenamePattern||str||The file name we want. We can use these variables: '$timestamp', '$sequence', '$fileextension', '$filename'. (default: '$filename.$fileextension')|
Set the uploader options according to your settings by default. This function has only one argument. You are able to define a more restrictive uploader options throught the only argument which has this method. The mentioned options are described in the table below.
|contentTypes||List of str||We specify the contentTypes of the files.|
|maxSize||int||Maximum size of the uploaded file expresed in bytes. The maximum size allowed is 5GB (default: 5 * 1000 * 1000 * 1000 Bytes)|
|minSize||int||We specify the minimum number of bytes the file can get.|
Note: The path where the objects will be stored has this shape according to your backend:
amazon-s3 and dropbox: /personal-path/year/month/day/hours_minutes_seconds/random_number/
Using the Uploader ignoring the uploading settings by default
In this example, the uploader will be able to upload images before the 1st of September 2015. These files, that will be uploaded in the folder /my-images/, must be in format png or gif and have less than 5,000,000 Bytes (5MB). We have a different policy and signature by each content type defined. Both of them are generated throught a method that you can see below.
Method to generate policy and signature
This function is only useful if you known how to generate the policy and signature needed to upload something into amazon or dropbox. Belower it is explained how to do it. If you are going to use this function, it is mandatory to use all the options listed in the next table.
|backend||str||The type of backend. The possible values are:
|path||str||The path where the files will be uploaded. It must end by '/'. For example: 'one/two/', or '/'.|
|expirationDate||str||The expiration date of the policy and the signature. It must be expressed in this format YYYY-MM-DDTHH:MM:SSZ. Example: 2013-01-21T21:30:00Z.|
|signature||Dict <str,str>||The signature associated to a contentType to upload a file. Below, it is explained how to create this value.|
|policy||Dict <str,str>||The policy associated to a contentType to upload a file. Below, it is explained how to create this value.|
|bucketName||str||(Only in amazon-s3) The bucket name.|
|region||str||(Only in amazon-s3) The region name. It can be one of these:
|publicKey||str||(Only in s3) The amazon s3 access key. Check it out here|
|acl||str||(Only in s3) We specify if the file will be
|maxSize||int||(Only in dropbox). Maximum size of the uploaded file expresed in bytes|
|minSize||int||(Only in dropbox). Minimum size of the uploaded file expresed in bytes|