How do I replace a HTML file input with a web URL?

I am trying to use the Zendesk API to upload files as attachments on support tickets. I am able to successfully upload local files, but sometimes, I need to copy attachments from other tickets instead.

Right now, I'm using the basic HTML input type="file" to allow the user to select a file from their local machine. Is there an easy way for me to get the file from a provided web URL in the exact same format instead?

I do not have trouble replacing the actual input with a text input, I just can't figure out how to actually process the file at the URL to get it in the format I need.

Thanks!

I have tried to use fetch() as well as FileReader on an XMLHttpRequest function, but I don't know what exactly I need to do with what is being returned to me from those functions.

<body>
  <label for="data">Select file:</label>
  <input type="file" name="data[]" id="data" multiple>
  <button type="button" onclick="uploadfile()">Upload file now...</button>
  </br></br>
  <label>Token value:</label>
  <input type="text" id='token_value_from_upload' style="width: 220px;">

<script>
 function uploadfile() {
      //retrieve the uploaded file
      var file = data.files[0];

      console.log(file.type);

      $.ajax({
        url: "https://instance.zendesk.com/api/v2/uploads.json?filename=" + file.name,
        type: 'POST',
        data: file,
        dataType: 'json',
        processData: false,
        contentType: 'application/binary',
        headers: {
          "Authorization": TOKEN
        },
        success: function(response) {
          console.log(response);
          document.getElementById('token_value_from_upload').value = response.upload.token;
        }
      });
    }
</script>
</body>

The uploadfile function should take a web URL for a file, upload the file to Zendesk, and put the token that is returned in the "token_value_from_upload" box.

Solution

One thing you can do is using JavaScript to download the file from the provided web URL and then upload it. I checked the documents for Zendesk's Attachments API here. When you call "https://instance.zendesk.com/api/v2/uploads.json" to upload a file, you can put whatever file content you want in the data area.

As of your case, you can use $.get(url) to get the content from the provided web URL and then include the content in the post request. (I don’t have a Zendesk account, so I did not test my code.)

function download(url) {
    $.get(url).success(function (data) {
        upload("test.txt", data);
    });
}

function upload(name, data) {
    $.ajax({
    url: "https://instance.zendesk.com/api/v2/uploads.json?filename=" + name,
    type: 'POST',
    data: data, // put the file content here
    dataType: 'json',
    processData: false,
    contentType: 'plain/text',
    headers: {
      "Authorization": TOKEN
    },
    success: function(response) {
      console.log(response);
      document.getElementById('token_value_from_upload').value = response.upload.token;
    }
});
}

However, please notice that due to the CORS policy, it may be difficult to download file through JavaScript.

Another way to solve this problem, I notice you mentioned that you want to copy attachments from other tickets. You can try to just include the token of the file that has been uploaded before to the new case instead of downloading and reuploading the file. You can check this post for details. All you need to do is find the token for the file and include it in the new case.