Upload Images with compression on front end

UploadFilesCompress.md

Upload Images with Compression on Front-End

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.

Methods

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.

Options

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&param2=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.

Events

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.