javascript - Create File object using file path - Stack Overflow

admin管理员组

文章数量:1287637

With the given file path, create a file object. new File(file_path) doesn't work. (WIN/MAC)

When tried creating a new file object using File constructor. There occurs an error.

new File(decodeURI(file_path))

when the above approach is followed File constructor err es up.

With the given file path, create a file object. new File(file_path) doesn't work. (WIN/MAC)

When tried creating a new file object using File constructor. There occurs an error.

new File(decodeURI(file_path))

when the above approach is followed File constructor err es up.

• javascript
• jquery
• file
• path
• filepath

Share Improve this question Follow asked Apr 10, 2019 at 11:28 GurudevGurudev 5311 gold badge11 silver badge77 bronze badges 2

• 1 This is not correct syntax as a File object constructor doesn't accept a path. It wants a byte array, amongst others: developer.mozilla/en-US/docs/Web/API/File/File – Rory McCrossan Commented Apr 10, 2019 at 11:30
• As above, also check which browser you are using: developer.mozilla/en-US/docs/Web/API/File/… – fdomn-m Commented Apr 10, 2019 at 11:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Had the exact same issue today, so I'll provide an answer in TypeScript(3.7.5) based on what worked out for me.

Tips:

• FileAPI needs a Blob to work with (as others have also stated), it won't work with a file path.

The function:

static async createFile(path: string, name: string, type: string): Promise<File> {
            let response = await fetch(path);
            let data = await response.blob();
            let metadata = {
                type: type
            };
            return new File([data], name, metadata);
}

The call:

await createFile('../assets/images/someInterestingPNGImage.png', 'iAmAFile.png', 'image/png')
        .then((file) => {
            //do something with ur file.
            console.log(file);
         });

File API needs a Blob here is work-arround

var GetFileBlobUsingURL = function (url, convertBlob) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.addEventListener('load', function() {
            convertBlob(xhr.response);
        });
        xhr.send();
};

var blobToFile = function (blob, name) {
        blob.lastModifiedDate = new Date();
        blob.name = name;
        return blob;
};

var GetFileObjectFromURL = function(filePathOrUrl, convertBlob) {
       GetFileBlobUsingURL(filePathOrUrl, function (blob) {
          convertBlob(blobToFile(blob, 'testFile.jpg'));
       });
};
var FileURL="test/test.jpg"
GetFileObjectFromURL(FileURL, function (fileObject) {
     console.log(fileObject);
});

Here is a simple alternative solution using axios:

const srcToFile = async (src, fileName) => {
    const response = await axios.get(src, {
      responseType: "blob",
    });
    const mimeType = response.headers["content-type"];
    return new File([response.data], fileName, { type: mimeType });
  };

本文标签： javascriptCreate File object using file pathStack Overflow