Sending an image to a online storage/database using XHR

Question

I've been through a few similar posts here, but cannot seem to find what I need.

I have a web application (HTML5 and Javascript), which has a picture taking function and I need it to then send it to some form of storage or database (preferably something like .json). I am quite new to web development so I am not very familiar with how exactly this would work.

So far I have the following code, which takes the picture and sends it using XHR.

<input id="objPic" type="file" accept="image/*" capture="camera">
<script>
 var newImage = document.getElementById('objPic');
    function sendPic()
 {
  var file = fileInput.files[0];
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload/path', true);
  xhr.send(file);
 }
    myInput.addEventListener('change', sendPic, false);
</script>

My Question is about how/where to send it (what do I put as a path)? What is the best way to store the images?

My webpage is using github as a host (if that is relevant in any way).

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Unfortunately this is not really easy. As you said you need to access some form of storage, and GitHub Pages (I imagine that's what you use) doesn't provide that. Depending on your needs I see two ways forward:

If you only need to store the image for the user who uploads it, you could save it directly in his browser using localstorage.
If you need to access the images of all users, you could use a javascript API of a third-party storage provider, like Google Cloud Storage. This is an example that can get you started.

Sending an image to a online storage/database using XHR

1 Answers1