javascript

Base64 image compression before sending it to Cloudinary  #angularjs #reactjs

  • I used Jimp for the mixture with angular-base-64-upload.
  • I was using angularjs for framework, but after I figured out sending images to backend is quite tricky in single page app framework(angular), I chose to compile the image to base64 and send it to the backend.
  • Stack Overflow works best with JavaScript enabled
  • It seems like I have to separate text data and file data when using such packages, which eventually makes me difficult to scale the app and data structure.
  • But very big in size and with many file upload inputs.

I am making a web app that supports image upload and views for users. I was using angularjs for framework, but after I figured out sending images to backend is quite tricky in single page app framework(angular), I chose to compile the image to base64 and send it to the backend.

@ng_real_ninja: Base64 image compression before sending it to Cloudinary #angularjs #reactjs

I am making a web app that supports image upload and views for users. I was using angularjs for framework, but after I figured out sending images to backend is quite tricky in single page app framework(angular), I chose to compile the image to base64 and send it to the backend.

Once the backend grab the base64 image, it will send again it to Cloudinary and the database will save the response from cloudinary, which is JSON file that stores image properties and urls.

This worked great so far, but now I want to add one more process, image compression, between any of the process above. I am quite new to this method. So I am wondering if any one who have dealt with this and get me some suggestion or recommendation.

Thanks for your time.

When you use Base64 you’re actually increasing the file size. Isn’t regular HTTP compression enough for you? And… It’s not so “tricky” to upload files with angular. See this answer: stackoverflow.com/questions/18571001/… – karliwson yesterday

Thanks. I also looked into that package and way to do that. However, the forms I am dealing with is not just forms with several inputs. But very big in size and with many file upload inputs. It seems like I have to separate text data and file data when using such packages, which eventually makes me difficult to scale the app and data structure. That’s why I decided to go base64 even if it goes larger than bare data. – Supergentle yesterday

Here is what I have figured out. Hope this will help some people who is struggling with the same question.

javascript