Home/ Questions/Q 9001843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:29:26+00:00

My App involves heavy client side image manipulation. Since the files are modified so

  • 0

My App involves heavy client side image manipulation. Since the files are modified so frequently during a users session we do not physically upload them to the server until the user is finished and chooses to save the image(s).

The images are read from the client using the html5 file API and stored in memory as base64 strings where the user proceeds to perform his/her manipulations quickly and efficiently.

When the user chooses to save we transfer the string or strings to the server via a standard ajax POST and then build the image into a physical file server-side.

What I would like to do is provide a progress bar for this final upload stage.

Now, I am well aware that the html5 spec includes support for file upload progress reporting. However we are not using the standard upload methods, instead, as mentioned above the images are sent as strings.

So my question really boils down to the following:

A) Is there anyway to actual measure the actual bytes sent during a simple post (PHP serverside). If so this would work as I already have the image size in bytes from the HTML5 filereader api.

B) If not is there anyway I can convert the base64 data into actual files on the fly and send them via the standard html5 upload method, reporting the progress as we go.

In either case… If so, how?

Many thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s easier when you send the Base64 image via ajax. Ajax works with a callback function, so just use an indicator of some sort to let the user know that ajax has been initiated (i.e. the file download has started ). On completion the callback function will run, now you can turn off the indicator whatever it might be.

    As far as measuring actual bytes, via ajax I’m not sure.

    This method

    showing progressbar progress with ajax request

    suggest estimating it. I would take it a step further and maybe time how long it take the callback over say 10 tries( use this average to estimate your progress bar and also use the 90% trick mentioned above ).

    Or if you want to encode/decode your Base64 text.

    How can you encode a string to Base64 in JavaScript?

    • 0