Page 1 of 6

resize image before upload to db

Posted: Mon Jun 17, 2013 8:53 pm
by Sean Kelley

I am following along with this how-to which works fine.
http://docs.appery.io/tutorials/uploa...

I am wondering how to resize the images either before they get to database. I am new to html5 but it seems like use of canvas may be the answer. I came across this but I am not sure how to integrate this with how-to code:
https://hacks.mozilla.org/2011/01/how...
What would you need to do in the how-to to limit your file sizes?

Any tips would be appreciated :-)


resize image before upload to db

Posted: Mon Jun 17, 2013 11:46 pm
by Igor

Hello Sean,

This would need some time to find an answer for you.
We are working on it.


resize image before upload to db

Posted: Tue Jun 18, 2013 9:37 am
by Maryna Brodina

Hello!
1) In Panel on Upload page add add line with < canvas tag so that entire code in Panel woul be:
code<form enctype="multipart&#47;form-data" method="post" name="fileinfo" style="visibility:hidden">
<fieldset>
<input type ="file" name ="fileselect" id="fileselect"><&#47;input>
<&#47;fieldset>
<&#47;form>
<script type="text&#47;javascript">
&#47;&#47; set event listener for call preview after select file
var fileselect = $('#fileselect');
fileselect&#46;bind("change", fileSelectHandler);
<&#47;script>
<canvas id="canvas" style="display:none;"><&#47;canvas>/code

2) change upload function to look it like this:
codefunction upload() {
function dataURItoBlob(dataURI) {
var binary = atob(dataURI&#46;split(',')[1]);
var array = [];
for(var i = 0; i < binary&#46;length; i++) {
array&#46;push(binary&#46;charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image&#47;jpeg'});
}

Code: Select all

 var img = document&#46;createElement("img"); 
 var reader = new FileReader();   

 reader&#46;onload = function( e) { 
     img&#46;src = e&#46;target&#46;result 
     var canvas = document&#46;getElementById('canvas');     
     var serverUrl = 'https:&#47;&#47;api&#46;appery&#46;io&#47;rest&#47;1&#47;db&#47;files&#47;' + file&#46;name; 
     var MAX_WIDTH = 100; 
     var MAX_HEIGHT = 100; 
     var width = img&#46;width; 
     var height = img&#46;height; 

     if (width > height) { 
       if (width > MAX_WIDTH) { 
         height *= MAX_WIDTH &#47; width; 
         width = MAX_WIDTH; 
       } 
     } else { 
       if (height > MAX_HEIGHT) { 
         width *= MAX_HEIGHT &#47; height; 
         height = MAX_HEIGHT; 
       } 
     } 
     canvas&#46;width = width; 
     canvas&#46;height = height; 
     var ctx = canvas&#46;getContext("2d"); 
     ctx&#46;drawImage(img, 0, 0, width, height);   

     var dataURL = canvas&#46;toDataURL('image&#47;jpeg', 0&#46;5); 
     var blob = dataURItoBlob(dataURL); 

     $&#46;ajax({ 
         type: "POST", 
         beforeSend: function(request) { 
             request&#46;setRequestHeader("X-Appery-Database-Id", FileDB_settings['database_id']),              
             request&#46;setRequestHeader("X-Appery-Session-Token", localStorage&#46;getItem('token')), 
             request&#46;setRequestHeader("Content-Type", 'image&#47;jpeg'); 

         }, 
         url: serverUrl, 
         data: blob, 
         processData: false, 
         contentType: false, 
         success: function(data) { 
             &#47;&#47; OPTIONAL, this is the file name under which the image was stored in database&#46;&#46;&#46;&#46; 
             &#47;&#47; localStorage&#46;setItem('db_file_name', file&#46;name); 

          }, 
         error: function(data) { 
             &#47;&#47; do something in case of an error&#46;&#46;&#46; 
         } 
     }); 
 } 
 reader&#46;readAsDataURL(file); 

}/code


resize image before upload to db

Posted: Tue Jun 18, 2013 1:56 pm
by Sean Kelley

Very Cool! Works beautifully- thank you so much!


resize image before upload to db

Posted: Tue Jun 18, 2013 5:32 pm
by Sean Kelley

After closer review, I am having a problem with this example far as order of execution. For example, I set the returned image url to a local storage variable (image_url) in the upload function. It sets ok, but its updated value is not available when I think it should be.
Within upload:
success: function(data) {
// OPTIONAL, this is the file name under which the image was stored in database....
// localStorage.setItem('db_file_name', file.name);
localStorage.setItem('image_url', data.fileurl);
},
On uploadButton click I run upload() then invoke another service which saves related info including the image_url location. This mapping (createAd) seems to get the image_url value before upload() is run even though in the events area upload is run first.

Any idea on what is going on here?

Image

Image

The result is that when the upload is done, the image_url for the previous image gets saved with the current image.


resize image before upload to db

Posted: Tue Jun 18, 2013 7:32 pm
by Kateryna Grynko

Hi Sean,

You should call service createAd.execute( {} ); in your code. That is, there should be the following:
codesuccess: function(data) {
&#47;&#47; OPTIONAL, this is the file name under which the image was stored in database&#46;&#46;&#46;&#46;
&#47;&#47; localStorage&#46;setItem('db_file_name', file&#46;name);
localStorage&#46;setItem('image_url', data&#46;fileurl);
createAd&#46;execute( {} );
}, /code
You'll probably have to move here the definition of two variables that are put in your screenshot. The reason is asynchronous execution. Next click handler (setting variables values and then invoking a service) is executed immediately after requesting the first call, without waiting for an answer.


resize image before upload to db

Posted: Tue Jun 18, 2013 7:49 pm
by Sean Kelley

Thanks again- that works perfectly :-)


resize image before upload to db

Posted: Tue Jun 18, 2013 9:19 pm
by Sean Kelley

After testing this code, I noticed that all three of the following devices have a different result. It does not seem to matter if browsing or using camera to capture.

Nexus 7 android tablet- using camera and browse works without issues using Chrome browser. Image is saved ok and displays ok.

iPhone 4 with iOS 6- using camera or browsing previews fine. Upload service completes successfully. Trying to view image is broken. An image download direct form Appery database says "Invalid image"

Android phone (android 4.1.2 with Chrome 18.0.x) -Upload button does nothing and no photo gets to database.

Do you have any ideas on what can be changed to work in all three cases? Also, desktop chrome browser browses and save/displays image fine.

I am going to share my app link via email with login to test.


resize image before upload to db

Posted: Tue Jun 18, 2013 9:37 pm
by Alena Prykhodko

Hello Sean! Received your email. We'll test it and update asap.


resize image before upload to db

Posted: Wed Jun 19, 2013 2:51 pm
by Kateryna Grynko

Hi Sean,

We are working on it. You can test it yourself: https://developers.google.com/chrome-...