Its a plugin that enables you upload image files to the server with a front-end side compression using javascript. So basically the image that you upload gets redrawn on the canvas with new dimension that you specify in the options and a compressed base64 encoded string is obtained from it. Now most of us these days have a phone with a fancy camera, that clicks the images of sizes of around 8-13 MB. So uploading that kind of size onto the server is totally not acceptable. So you wish to either compress on front end side or the server side. Android has some libraries that allows you to compress the files before sending onto the server, but on the other hand there is no such solid lead available on the browser side.
So here's a plugin that comes to the rescue.
The logic behind compression is that the larger size images have ample amount of resolution to them, but most of the time that kind of resolution is not needed. So this plugin is basically resizing the higher resolution image to the specified dimensions that you will provide or it is going to use the default dimensions as specified inside the plugin. To use the compression algorithm on the front end especially with the current browser specs is quite a heavy task and it will slow down your page with high CPU usage, so resizing on the other hand helps.
You can find the file on my github repo
In case you are using the npm module then you should pass the selector i.e. for a div with an id it should be '#divID' or in simple words you need to pass the element selector similar to what we do in jquery.
I have listed out the events, methods and options for incorporating the plugin.
uploadFile(options)
This is the initializer function for upload file plugin.
Just call this function on the div on which you want to trigger the upload file plugin,
with the options object.
startUpload()
This function starts the upload by making a post call to the server.
For this function to work you have to disable autoSubmit property of uploadFile.
stopUpload()
This function stops the upload by setting a flag to disable the form submission.
remove()
This function as by the name removes the upload area from the DOM.
selector
This should only be specified in case you are not using the jquery plugin and using the npm module file instead.
Format should be a selector string for the container div of file input.
Ex:- '#divID' for div with an id of 'divID', '.divClass' for div with a class of 'divClass'
url
Specify the url in the option on which to submit your form data.
sizeLimit
Specify the size limit that you want to set for the image file
before compression. Default value is 16 MB
maxWidth
Set the maxwidth for image as it gets resized. Default value is 500
maxHeight
Sets the maxheight for image as it gets resized. Default value is 500
quality
Sets the quality that you want the image to be in. Default value is 0.5
outputType
Specify the output file type that you want to submit to server. Default value is png.
isBase64
Its a flag which when true sends the image as a base64 string to
server and when false sends a blob object. Default value is false.
allowFileType
In this you have to pass an array of accepted file types for the image.
Default value is ['jpg', 'png', 'jpeg']
enablePreview
Flag which when true shows the preview of the image that is going
to be sent to server. Default value is false
previewSelector
This option is dependent on the enablePreview option. You have to
specify the container element in which you want the preview to be seen.
Its also helpful when you have set the autoSubmit property to false.
inputFieldName
The key for the image object which you want to send in the formData.
Default value 'avatar'
autoSubmit
Flag for auto submission of the form on upload. Default value is true
isDragNDrop
Flag for enabling the drag N drop feature on your upload area. Default value is true
appendFileInput
In case you want to handle styling of input type = "file" tag on your
own. You can set this option to false. As this option will append the
input type = "file" in your upload area div. So when you set it to
false, you have to also write the input tag inside the upload area div.
Default value is true
fileInputSelector
This is dependent on appendFileInput property. If you have set
appendFileInput to false then you have to specify the ID of the
input file tag in this option.
allowMultiple
Flag which when true allows to upload multiple images at a time.
However be careful to increase the payload limit of your server, as
it might get big. Default value is false
maxFiles
Now if you allow multiple input on the plugin, then you can specify
the maximum no. of files you want to allow at a time.
allowAjax
If true it will submit data through ajax otherwise it will create a
hidden input field with the same name specified in inputFieldName.
There's a catch in this parameter. You can only disable ajax if you
have your backend customized to handle base64 string value for image file.
Otherwise if it accepts only file object then you would have to submit the form
explicitly using startUpload() method. This method will first append all the
form inputs that you want to collectively send into one form object and
then make an ajax call to the URL that you have specified earlier.
appendFormData
If you wish to send other form data with the upload method then
you can set this to true. Default value for this is false.
formID
If you have enabled appendFormData option then only you can use
this option. You have to pass the form id in this option, then the plugin
get the form data and append it with the image.
formDataString
Again this option is useful if you have enabled appendFormData option.
However you would have to pass the form data in following format.
"param1=1¶m2=2&.." You can also use the form.serialize() method
of jquery to get the string in this format or you could simply pass
the formID and plugin will do the rest.
onLoad
Event is fired on plugin load
beforeSubmit
Event is fired just before submit of file
onSuccess
Event is fired on successfull upload
onError
Event is fired on error.
I haven't done anything on the styling part, coz i guess most of you would want to do it on your side, since everybody wants a custom thing. So you can go through the IDs of the element that i have created and style it on your own. This repo only contains a simple JS file.
So feel free to write any suggestions.