0

I have a input field "type=file" that allows user to upload video file.

     <input type="file" class="form-control" id="file1" />

I want to retrieve file content (Video) from the input field and send it with XMLHttpRequest(). How can i achieve it ? This is my code but, it is not working.

I want to save video file to SharePoint online with XMLHttpRequest().

        var studentName = "Test";
        var extension = ".mp4";
        var VideoFile = "";

        const fileInput = document.querySelector('input');
        //Updated code
        let file = document.getElementById('file1')[0];
        let formData = new FormData();
        formData.append("video", file);

        var fullPath = document.getElementById('file1').value;
        extension = fullPath.split('.').pop();
        //build http request string using URL from Power Automate flow
        var StudentVideo = '{ "StudentVideo" : [' +
                           '{ "studentName": "' + studentName +'","VideoFile":"' + formData +'", 
                              "extension":"' + extension +'"} ]}';
        var req = new XMLHttpRequest();
        var url = "......./triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=............";

        //send https request to Power Automate
        req.open("POST", url, true);
        req.setRequestHeader('Content-Type', 'application/json');
        req.send(StudentVideo);
Guido Preite
  • 13,789
  • 3
  • 32
  • 63
Developer
  • 1
  • 1
  • The method of uploading files is the same whether they are text, image audio or video. See the duplicate for the pattern you need to follow. Note specifically the use of `FormData` – Rory McCrossan May 24 '21 at 08:02
  • @RoryMcCrossan use formData but, still not able to upload file on sharePoint. Please see code. – Developer May 24 '21 at 08:37
  • 1
    @Developer — You have to post the form data. You're completely ignoring it and are posting some hard-crafted (yikes) JSON instead. – Quentin May 24 '21 at 08:38
  • @Quentin In power Automate Flow, we can send data as JSON. As you can see I have passed "VideoFile":"' + formData +'". – Developer May 24 '21 at 08:40
  • While it's possible to send files in JSON (using base64 encoding) it's not a good idea as it inflates the file size, and video files won't be small to begin with. Look to see if there's a way to send binary encoded content to the sharepoint server you're using. – Rory McCrossan May 24 '21 at 08:42
  • @Developer — Huh. Thought I'd checked for that. You can't coerce FormData objects into strings. You have to post the FormData object itself. – Quentin May 24 '21 at 08:42
  • The duplicate question covers the general way to upload files using Ajax, *however* you need to upload the files in a way supported by SharePoint, so there are really two steps you need to solve (1) How does the API I'm using expect files to be uploaded? (2) How can I upload files like that using JS? The duplicate makes assumptions about (1). I've no idea what the server side code you have to process the upload looks like. I don't know if it is a native SharePoint API or a custom one. I don't know if it supports file uploads in the first place. – Quentin May 24 '21 at 08:44
  • @Quentin The URL you see, is Microsoft Power Automate Flow's URL. We can trigger flow from JS like I did and pass data as JSON. With ms Flow you can create files in SharePoint by using SP connectors. – Developer May 24 '21 at 08:50
  • I still have no idea what format it expects requests which are uploading binary files to conform to. – Quentin May 24 '21 at 08:54
  • @Quentin Let say I am sending formData object directly in the request body. What content-type should i use then ? – Developer May 24 '21 at 09:55
  • To quote the answer on the duplicate question: You do NOT need to set request header Content-Type to multipart/form-data - this will be **set automatically by browser**. – Quentin May 24 '21 at 09:59

0 Answers0