Image upload from mobile with javascript

Question

I’m creating a survey app with javascript or jquery.

The app saves everything inside the phone itself, to then be sent to the server, because it doesn’t always have good internet signal.

Example of saved data:

Question:

How to upload the file from the file, since I only have the link from where it was saved?

I thank everyone who can help me.

Code:

function upsync() {
  db.transaction(function (tx) {
    tx.executeSql('SELECT ID, id_ar, id_ambiente, foto, obs FROM vistorias_fotos WHERE id_ar=?', [id_ar], function (tx, resultado) {

      let rows = resultado.rows;

      for (var i = 0; i < rows.length; i++) {


        $.ajax({
          type: "POST",
          url: "https://testes.musite.net/app/up_vistorias.php",
          data: {acesso: 'ok',
                 id_ar: rows[i].id_ar,
                 id_ambiente: rows[i].id_ambiente,
                 foto: rows[i].foto, //->   file:///storage/emulated/0/Android/data/br.com.nomedoapp.app/cache/1578505903880.jpg
                 obs: rows[i].obs,
                },
          success: function(data) {
            if (data == 'ok'){
              alert('Dados enviado ao MySQL');
            }
          }
        });



      }
    });
  });
}

Answer 1

Just use new FormData(); (read: https://developer.mozilla.org/en-US/docs/Web/API/FormData/append), which is a native Javascript API, and so apply:

var form = new FormData();

form.append('acesso', 'ok');
form.append('id_ar', rows[i].id_ar);
form.append('id_ambiente', rows[i].id_ambiente);
form.append('acesso', 'ok');
form.append('obs', rows[i].obs);
form.append('foto', rows[i].foto);

$.ajax({
  type: "POST",
  url: "https://testes.musite.net/app/up_vistorias.php",
  data: form,

  /*é necessário estas duas propriedades estarem como FALSE*/
  processData: false,
  contentType: false,

  success: function(data) {
    if (data == 'ok'){
      alert('Dados enviado ao MySQL');
    }
  }
});

If you need to send a custom photo name, do it:

form.append('foto', rows[i].foto, 'teste.jpg');

Your case being a webView that’s running I think it works, but I can’t test it at the moment, so if this doesn’t work, you can try using Blob and FileReader (this part of the response after tested I will remove)

---

If you are looking for Javascript upload, you can use it like this: /a/66470/3635 and if you upload a file "saved" as the question here, it should look like this:

var client = new XMLHttpRequest();

client.open("POST", "https://testes.musite.net/app/up_vistorias.php", true);

client.onreadystatechange = function(){
 if (client.readyState == 4){
    if (client.status >= 200 && client.status < 300) {
        //Sucesso HTTP
        if (client.responseText == 'ok'){
          alert('Dados enviado ao MySQL');
        }
    } else {
        //Erro
    }
 }
};

var form = new FormData();

form.append('acesso', 'ok');
form.append('id_ar', rows[i].id_ar);
form.append('id_ambiente', rows[i].id_ambiente);
form.append('acesso', 'ok');
form.append('obs', rows[i].obs);
form.append('foto', rows[i].foto);

client.send(form);