Skip to content

filesContent variable looses file path during parsing in electron #104

@MrKampla

Description

@MrKampla

We're using file-selector package under the hood to parse events on the file virtual input element that we're creating during upload. This package is adding file name as a path in environments in which path is not availible (e.g. browser). In Electron, file object already contains an absolute path to the selected file so there's no need for overriding it.
Source code of file-selector package:

export function toFileWithPath(file: FileWithPath, path?: string): FileWithPath {
    const f = withMimeType(file);
    if (typeof f.path !== 'string') { // on electron, path is already set to the absolute path
        const {webkitRelativePath} = file as FileWithWebkitPath;
        Object.defineProperty(f, 'path', {
            value: typeof path === 'string'
                ? path
                // If <input webkitdirectory> is set,
                // the File will have a {webkitRelativePath} property
                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
                : typeof webkitRelativePath === 'string' && webkitRelativePath.length > 0
                    ? webkitRelativePath
                    : file.name,
            writable: false,
            configurable: false,
            enumerable: true
        });
    }

    return f;
}

The problem with File object is that it is not spreadable, just like Error objects. In useFilePicker.ts, we're spreading the file object and only appending file content, name and lastModified properties:

reader.onload = async () =>
            Promise.all(
              validators.map(validator =>
                validator.validateAfterParsing(props, file, reader).catch(err => Promise.reject(addError(err)))
              )
            )
              .then(() =>
                resolve({
                  ...file, // <-- THIS IS THE ROOT CAUSE OF THE BUG
                  content: reader.result as string,
                  name: file.name,
                  lastModified: file.lastModified,
                } as FileContent<ExtractContentTypeFromConfig<ConfigType>>)
              )
              .catch(() => {});

This causes the path to be gone in electron altogether and in browser it is just gonna be a copy of the filename. In order to fix this bug, we have to manually destructure each property from the File object.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions