So I'm trying to use MathPix API to get pure Latex from processed image in my Django project.

I use few <input type="file"> fields and event listener on each one. After change event the file is validated (if it is a .jpg, .png etc). Next I use URL.createObjectURL() function to create a url for uploaded file without saving it before to db.

function checkExtension(event) {
    var input = event.srcElement;
    var fileName = input.files[0].name;
    var extension = fileName.substr(fileName.lastIndexOf("."));
    var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    var file = document.getElementById(event.target.name)
    if (allowedExtensionsRegx.test(extension) == true) {
      file.setAttribute("class", "btn-success p-2 rounded")
      const image = input.files[0];
      const image_url = URL.createObjectURL(image)
      snip_request(image_url)
    }
    else {
      file.setAttribute("class", "btn-danger p-2 rounded")
    }
}


function snip_request(image_url){
  if(image_url) {
    const appId = "XXXXXXXXXXXXXXXXX";
    const appKey = "YYYYYYYYYYYYYYYY";
    var url = "https://api.mathpix.com/v3/latex";
    var _data = {
      "src": image_url,
      "formats": "text",
      "data_options": {
        "include_asciimath": true,
        "include_latex": true
      }
    }
    var _header = {
      "content-type": "application/json",
      "app_id": appId,
      "app_key": appKey
    }

    const response = fetch(url, {
    method: "POST",
    body: JSON.stringify(_data),
    headers: _header
  })
  .then(response => response.json())
  .then(json => console.log(json));;

  }
}

Unfortunately at the end of the day I get error message:

{
    "error": "blob:http://localhost:8000/4c523864-93ec-452a-ace1-0156b63e9837: TypeError: Only HTTP(S) protocols are supported",
    "error_info": {
        "id": "image_download_error",
        "message": "TypeError: Only HTTP(S) protocols are supported",
        "url": "blob:http://localhost:8000/4c523864-93ec-452a-ace1-0156b63e9837"
    }
}

I have no clue why this is not working? Is it the problem with the "temporary URL" or the way of file being downloaded by the server? I'm pretty new in Java Script so any advice will be appreciated.

CodePudding user response：

Your problem isn't directly related to the javascript code. It's that the Mathpix API doesn't allow directly uploading images they wan't you to send them a link to the image. blob: urls are only virtual urls in the browser and therefore only accessible from the browser not from Mathpix's servers. So you need to upload your image anywhere (on your server, on an storage bucket, etc.) and send the http:// url to that image file to Mathpix's API.

CodePudding user response：

for local file you need FormData() and input.files[0], the src option is for image stored on server.

function checkExtension(event) {
  var input = event.srcElement;
  var fileName = input.files[0].name;
  var extension = fileName.substr(fileName.lastIndexOf("."));
  var allowedExtensionsRegx = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
  var file = document.getElementById(event.target.name)
  if (allowedExtensionsRegx.test(extension) == true) {
    file.setAttribute("class", "btn-success p-2 rounded")
    const image = input.files[0];
    // blob url work only at current browser/tab
    //const image_url = URL.createObjectURL(image)
    snip_request(image)
  } else {
    file.setAttribute("class", "btn-danger p-2 rounded")
  }
}

function snip_request(image) {
  if (image) {
    const appId = "XXXXXXXXXXXXXX";
    const appKey = "YYYYYYYYYYYYY";
    var url = "https://api.mathpix.com/v3/latex";
    // set FormData here
    var _data = new FormData();
    _data.append('file', image);
    _data.append('formats', "text");
    _data.append("data_options", JSON.stringify({
      "include_asciimath": true,
      "include_latex": true
    }));
    /*
    var _data = {
      "src": image_url,
      "formats": "text",
      "data_options": {
        "include_asciimath": true,
        "include_latex": true
      }
    }
    */
    var _header = {
      "content-type": "application/json",
      "app_id": appId,
      "app_key": appKey
    }

    const response = fetch(url, {
        method: "POST",
        body: _data,
        headers: _header
      })
      .then(response => response.json())
      .then(json => console.log(json));
  }
}