How to upload images via AJAX and withOUT Jquery but pure JavaScript only

JavaScript
1

Hello,

I am interested in the Pure JavaScript code that would allow for uploading image (files) via AJAX.
FYI, on the server side we will be using Php to receive the image (files) from the client.
I have searched for this issue via Google, etc. and find ideas that are either way outdated, and the author says so too, or not exactly addressing this question.

So I really appreciate clear and clean methods (Codes) that you have to get this task done, which is again to upload images from Client to the Server and then display these images on the Client side, with AJAX / CSS and no JQuery but pure JavaScript only.

Thanks

2

Have you tried this yourself? If so, why don’t you post the code you have and let us know where you ran into problems. Then maybe someone can give you a hand with it.

4 Likes
3
1 Like
4

There was a time when browsers did AJAX differently and the code needed to help ensure it worked cross-browser could get verbose if not outright confusing.

jQuery helped by taking all the “if this, do this, else if that, do that” code into the library so that developers only needed to use the jQuery syntax. (of course it also meant users needed to have jQuery loaded)

Things have changed since then and there is now good browser support for non-jQuery AJAX - XMLHttpRequest

Both of those pages have quite a few examples that you can experiment with depending on what you want to do.

3 Likes
5

Hi,

I am quite well versed in AJAX as far as submitting Text information goes.
What I need is suggestion code with uploading images (binary files) via AJAX.

I would appreciate code that singularly focuses on uploading images (binary files) via AJAX.

Thanks,

6

To quote the second page I linked to.

If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

Which of the two approaches have you tried, the FormData API or XHR with the FileReader API ?

2 Likes
7

We have tried neither one. Which one do you recommend? And why?
Which is is one pure JavaScript AJAX?

8

I recommend you create and test three files, the two examples under “A little vanilla framework” and the one under “Using FormData objects”. I named them form-one.html, register.php, and form-two.html but you could name the HTML files whatever.
Why? So you can see them in action for yourself and make a decision based on what you think is best for you.

Well, the first example HTML file is titled “Sending forms with pure AJAX” and the second “Sending forms with FormData” but I’m guessing you really mean “No jQuery”? Neither example uses jQuery.

When you submit the forms and look in your dev tools console, for both you will see something like

:: Files received ::
Array
(
    [photos] => Array
        (
            [name] => Array
                (
                    [0] => avatar.png
                )
            [type] => Array
                (
                    [0] => image/png
                )
            [tmp_name] => Array
                (
                    [0] => C:\Windows\Temp\php90CE.tmp
                )
            [error] => Array
                (
                    [0] => 0
                )
            [size] => Array
                (
                    [0] => 3455
                )
        )
)
9

Mittineague, where are the attached files!
I do not see any files attached.
To be exact, I do not see these files attached in any form:
form-one.html, register.php, and form-two.html

Thanks,

10

Mittineague, just to make it simpler, can you kindly provide me with these 3 things:
1- JavaScript code that would handle the File (image) upload via AJAX

2- HTML code that would go into same page, which would cause the File (image) upload as soon as they clicked on the Upload button and NOT upon clicking on the Submit button, hence file (image) upload being done via AJAX and not Php POST via submit.

3- Php code that would received the AJAX Post of the file(image) if any different from Php POST, otherwise this is not needed

Much Thanks,

11

I did not attach any files.
? Did you go to

the code (albeit minimalist) can be found there.
* note - I wasn’t getting scrollbars for the example code so it might not be obvious that the full examples are there (overflow hidden?)

To once again repeat the quote

If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

If it is “too complex to explain” it is most assuredly also too complex to provide full working code that would cover all possible use cases.

In case you are unfamiliar with the word “didactic” it roughly translates to “educational”. In this case, there is enough there to give someone a good start, but it is a start only. Where things go from there could be in any number of directions depending on what’s wanted.

IMHO, the best course of action is

  • get the example code working
  • remove the code you won’t be using from the example code
  • test to make sure it still works
  • start tweaking the code into what you want in as small “sections” as feasible. Testing after each change and fixing breakage before moving on to the next tweak.

It won’t necessarily all be easy, but completely doable given time and persistence.

5 Likes
12

Well given that I am not getting the code here, I went ahead and paid someone couple of $100s on Upwork to provide me the code and most importantly to work with me to integrate it into our Site. We will see how it goes.
Thanks.

1 Like
13

I’m glad you’ve found a satisfactory solution.

Now you understand why nobody here on the forums was able to provide the code for you; it’s just too big a job to ask of folks giving their spare time freely.

No, but as I say, you wouldn’t really expect to on a forum. Small snippets, yes, but the entire code for a big job? That’s really not the purpose of a forum. The purpose of a forum is to provide help and guidance (which you did get), and it’s then up to you to decide whether or not to persevere with the learning curve, or to decide the job is bigger than you expected and hire somebody.

I’m sure you already know all this. I just thought it was worth pointing out for the benefit of anybody else reading this topic, as we’ve had one or two new members recently who seem to think that a forum is a free coding service.

10 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.