Is it possible to perform an external UPLOAD with ajax?

Asked

Viewed 39 times

0

I have this code:

function uploadFile(x){


  //DEFINIÇÃO E RECEPÇÃO DAS VARIAVEIS PRA ENVIAR COM O AJAX
  var file              = document.getElementById("id_arq_documento_" + x ).files[0];
  var id                = document.getElementById("id_arq_" + x).value;
  var local_armazenado  = document.getElementById("local_armazenado_" + x).value;
  var autorizacao       = document.getElementById("autorizacao_" + x).value;

       //CHECA SE O INPUT FILE ESTÁ VAZIO...
        if(document.getElementById("id_arq_documento_" + x).files.length == 0){

            alert("Erro (" + x +"): Você deve selecionar um arquivo para envio");

        } else if(document.getElementById("local_armazenado_" + x ).value == 0){

            alert("Erro (" + x +"): Você deve informar o local de armazenamento");

        } else if( confirm('Deseja Realmente arquivar o documento? Esta ação não pode ser desfeita.')) {


        //SE O INPUT FILE NÃO ESTIVER VAZIO, EXECUTA A FUNÇÃO

          var formdata = new FormData();
          formdata.append("arqUP", file);
          formdata.append("autorz", autorizacao);

          var ajax = new XMLHttpRequest();
          ajax.upload.addEventListener("progress", progressHandler, false);
          ajax.addEventListener("load", completeHandler, false);
          ajax.addEventListener("error", errorHandler, false);
          ajax.addEventListener("abort", abortHandler, false);
          ajax.open("POST", "https://www.meusite.com.br/upload/upload.php?");
          ajax.send(formdata);

          //POR SEGURANÇA, QUANDO A FUNÇÃO FOR ACIONADA, IRà DESABILITAR O CAMPO processar E CHECKBOX
            document.getElementById("botao_processar_"+ x ).disabled = 'true';
            document.getElementById("progressBar_"+ x).style.display = 'block';
            document.getElementById("botao_processar_"+ x).style.display = 'none';


          function progressHandler(event){
          var percent = (event.loaded / event.total) * 100;
          document.getElementById("progressBar_"+ x).value = Math.round(percent);

          document.getElementById("status_"+ x).innerHTML = "Processando: " +Math.round(percent)+"%";


        }
        function completeHandler(event){

          document.getElementById("status_" + x).innerHTML = event.target.responseText;
          document.getElementById("progressBar_" + x).value = 0;

          document.getElementById("progressBar_" + x).remove();
          document.getElementById("botao_processar_" + x).remove();
          document.getElementById("id_arq_documento_" + x).disabled = 'true';
          document.getElementById("local_armazenado_" + x).disabled = 'true';
          document.getElementById("status_arquivo_" + x).innerHTML= '';
          alert('Up ok' + x);



        }
        function errorHandler(event){
          document.getElementById("status_" + x).innerHTML = "Falha ao enviar";
        }
        function abortHandler(event){
          document.getElementById("status_" + x).innerHTML = "Envio abortado";
        }

      }
    }

When I call the function inside my server, it runs normally:

ajax.open("POST", "upload.php");

But when I try to send the POST to an external URL:

ajax.open("POST", "https://www.meusite.com.br/upload/upload.php?");

It returns me the error:

Failed to send

And in my console Inpecionar Elemento appears:

Response to preflight request doesn’t pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://10.4.0.218' is therefore not allowed access.

I’ve checked everything. Write permissions on remote server, everything.

What could it be? Do you have any idea?

  • And this external file would be exactly the same PHP code that you run locally?

  • In fact it is an API to which I have to report the following variables: $arqUP which is the file for UPLOAD and autorz which is the upload authorization:

  • And this API allows external requests?

  • Yes. I opened my Inspect Element console and the following error appeared: Response to preflight request doesn’t pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://10.4.0.218' is therefore not allowed access.

  • The place where you will call the upload file will be in another same domain?

  • Yes Yes. Already insert header('Access-Control-Allow-Origin: https://www.merusite.com.br'); and nothing!

  • Added header("Access-Control-Allow-Origin: *") in the upload.php file?

  • Yes. Added, but still persists!

  • @netoweb You need to add to header the value of the address that will make the request. Given the error message, I’d say the IP you’re requesting from is 10.4.0.218, so that’s the value you need to add to header. For example: header("Access-Control-Allow-Origin: 10.4.0.218")

  • @Andersoncarloswoss - In case that line would go in my own application or API?

  • In the API you will receive the request

  • I know this is a trick. I did it by testing. I added this extension to Chrome and it worked perfectly. https://goo.gl/hEoirz

Show 7 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.