4

Basically I try to code a webpage where users can upload pictures via iPhone/Andoid and Desktop. These pictures should been saved as thumbnail in ./userupload and the link to this is stored in a MySQL DB.

I realized it with simple HTML form upload and a PHP Script cutting out the part which should be the thumbnail, saving the new picture and write link to database. It sounds easy but what is tricky that iPhone pictures are really big nowadays and mobile upload of a 6MB picture would take a long time cia 3G. Therefore I looked for a possibility to do the resizing at the clientside with Javascript. Through stackoverflow I found this very helpful little script which I use for resizing now.

Unfortunately my Javascript and HTML5 skills are not very developed and I don't know how to pass the resized image, which is now displayed through a <img> tag, together with the other input of the <form>, to my backend php script to save the image and write the link into the database. Do you have any ideas?

Thank you in advance

Kurt
  • 311
  • 1
  • 3
  • 9
  • Be careful, this seems like it could easily be exploited if the user uploads something that you expect to be image data but isn't. – PRNDL Development Studios Mar 27 '13 at 16:21
  • 1
    Valid point. I have a check on server side but undortubately not clientside. I need to look for a robuste validation function out there :) thanks – Kurt Mar 27 '13 at 16:31

1 Answers1

0

Well, since you have a base64 encoded image in src attribute of your resized <img>, you could put that value into a hidden input and upload the bas64 string (instead of real image). Then you can decode the image in your PHP script and save it the way you need.

ulentini
  • 2,413
  • 1
  • 14
  • 26
  • Hi! Thanks a lot! After trying to recode some JS I am now able to put the base64 into a hidden field. But if I try to decode base54 with base64_decode($hiddenfield) I do get a very strange looking piece of characters. I guess something is wrong with how I decode, do you have any idea how to decode correctly? – Kurt Mar 27 '13 at 15:55
  • Since images are _binary_ data, “strange looking” characters are to be expected if you view that data as text … – CBroe Mar 27 '13 at 16:13
  • @Kurt what you decode is not text, is image data. If you want to save it into a file, just put the decoded data into a file. – ulentini Mar 27 '13 at 16:19
  • Thanks. Just to make things clear: I create a new file - let's say picture.jpg - and put the base64-decoded text in it? Or how should I do it? – Kurt Mar 27 '13 at 16:35
  • ^ Yep, so long as the image is a jpeg. – PRNDL Development Studios Mar 27 '13 at 16:36
  • Just to make clear for the others: The encrypted file has `data:image/jpeg;base64,` attached and therefore need to be trimmed in order to have a valid jpeg. – Kurt Mar 27 '13 at 17:45