Uppy: Compress image before upload to destination

[agusesetiyono]

Hi.
This is a great library for uploading files with cool ui.

Can it compress image file (jpg or png) before uploading process started?

[kvz]

Hi, thanks for taking an interest in our project! What's your exact use case? I'm a bit worried that, since many people upload from mobile, it won't be worth the tradeoff in trying to compress images in the client at the expense of CPU power and battery life. Also, in the case of images there often already is some kind of compression algorithm applied, and so the gains are more limited than if one were to compress plain text for instance. This is also why webservers often enable on the fly gzip compression for e.g. html and css, but don't enable this for images by default. The machines have to work relatively hard for relatively low gains.

[eriestrisnadi]

@kvz I think, it is possible to use 3rd-party deps like image-compressor and do compressing onBeforeUpload Event related to @agusesetiyono question.

[kvz]

Thanks I didn't know about that lib! Initially I thought you meant doing lossless gzip-like compression, tasking the server with a decompression.
But it seems at first glance that this lib does lossy compression of the actual image? So that would mean a (perhaps not noticeable) lower quality image ends up at the server. We'd save bandwidth at the expense of compute/battery on the client side. We'd also pay a bit of bandwidth for shipping image-compressor downstream. I guess for some cases this could still be desirable. I wonder how many people would want this behavior (as an opt-in)? Perhaps the people wanting this most could come up with a thin custom plugin that achieves this already, and if we get enough votes/support for this feature, we could bundle said plugin with Uppy. This is just my initial thinking though. Feel free to add a whole lot of more thinking :) I'm also wondering what @arturi, @goto-bus-stop and @ifedapoolarewaju

[eriestrisnadi]

@kvz It would be greate if something like that lib available as a plugin, I will take a look for the source and if I can help, I will create a plugin for this.

[goto-bus-stop]

yeah interesting lib! a custom plugin for that would be cool--i personally think lossy compression might not be a wide enough use case for us to bundle it by default, but we could (should) add a page to the website or to the github wiki to link to useful third party plugins to make them a bit easier to discover and to give them some more exposure. & if lots of people end up using the plugin we can always add it to our cdn bundle later :)

[kvz]

💯

Sent from mobile, pardon the brevity.

On 3 Jan 2018, at 20:43, Renée Kooi [e-mail] wrote:

yeah interesting lib! a custom plugin for that would be cool--i personally think lossy compression might not be a wide enough use case for us to bundle it by default, but we could (should) add a page to the website or to the github wiki to link to useful third party plugins to make them a bit easier to discover and to give them some more exposure. & if lots of people end up using the plugin we can always add it to our cdn bundle later :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[ifedapoolarewaju]

I agree with @goto-bus-stop indeed! Another thing to add to the wiki page would be an example, following @lowsprofile's suggestion. Where the compression is done in the onBeforeUpload Event callback, using the image-compressor library (or any other similar library). So it would be clear that it's not mandatory to write a plugin to achieve this :)

[kvz]

👍

one nitpick, i would probably add this to the uppy.io site. wiki doesn't have great visibility, and then we have 2 sources of truth. editing website markdown is ~just as easy as using the wiki editor on github

[eriestrisnadi]

@goto-bus-stop
This is the sample demo on jsfiddle. What do you think? Did I miss something? Thanks!! :smiley:

var imageCompressor = new ImageCompressor()
var different = {
    beforeCompress: [],
  afterCompress: [],
}
var uppy = Uppy.Core({
        debug: true,
    onBeforeFileAdded: function(origin){
        different.beforeCompress.push(Object.assign({}, origin))
        return imageCompressor
        .compress(origin.data, { quality: .6 })
        .then(function(compressed){
            origin.data = compressed
          different.afterCompress.push(Object.assign({}, origin))
          return Promise.resolve()
        })
        .catch(function(err){
            uppy.log('Couldn\'t compressing file '+ origin.name +', will uploading the original one')
          different.afterCompress.push(Object.assign({}, origin))
            return Promise.resolve()
        })
    },
    onBeforeUpload: function(files){
        different.beforeUploaded = Object.values(files)
    }
})

// Using Plugins
uppy.use(Uppy.FileInput, { target: '.UppyInput', pretty: false })
uppy.use(Uppy.Tus, {endpoint: '//master.tus.io/files/'})
uppy.use(Uppy.StatusBar, { target: '.UppyInput-Progress', hideUploadButton: true })

// Run Uppy!
uppy.run()

// Event callback when complete to upload
uppy.on('complete', function(res) {
    different.afterUploaded = Object.values(uppy.getState().files)
    uppy.log(different)
})

[goto-bus-stop]

Closing as we won't be maintaining a plugin for this ourselves. Happy to link to one on the website if someone else builds and publishes one separately though! Thanks!