Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] JPG/PNG images uploaded as DOC in Media Library #199

Open
strapi123 opened this issue Aug 27, 2024 · 1 comment
Open

[BUG] JPG/PNG images uploaded as DOC in Media Library #199

strapi123 opened this issue Aug 27, 2024 · 1 comment
Assignees

Comments

@strapi123
Copy link

strapi123 commented Aug 27, 2024

Describe the bug
I am trying import the data from one server to another, the collection data is importing properly but the images jpg and png images are getting uploaded as DOC in media library with no-preview. SVG images are uploaded properly with the preview the issue is only with png and jpg.

We are storing assets in AWS s3. I have exported the data using Json V2 option.

Can some help with this issue.

To Reproduce
Steps to reproduce the behavior:

  1. Go to anyone collection and click import data type
  2. Click on import
  3. Data imported successfully.
  4. Images are uploaded as DOC type in media library.

Expected behavior
Images must be uploaded as IMAGE type in media library so that we can see its preview.

Screenshots
Screenshot 2024-08-27 at 5 26 10 PM
Screenshot 2024-08-27 at 5 26 31 PM

Additional context
Using Strapi 4.24.5 V

@strapi123
Copy link
Author

Found the issue @Baboo7. In the fetchFile function the content type is not coming from headers.response which sets it to null for PNG and JPG images.

const fetchFile = (url) => __awaiter(void 0, void 0, void 0, function* () {
var _a, _b;
try {
const response = yield (0, node_fetch_1.default)(url);
const contentType = ((_b = (_a = response.headers.get('content-type')) === null || _a === void 0 ? void 0 : _a.split(';')) === null || _b === void 0 ? void 0 : _b[0]) || '';
console.log("contentType ", contentType, " response ", response.headers)
const contentLength = parseInt(response.headers.get('content-length') || '0', 10) || 0;
const buffer = yield response.buffer();
const fileData = getFileDataFromRawUrl(url);
const filePath = yield writeFile(fileData.name, buffer);
return {
name: fileData.name,
type: contentType,
size: contentLength,
path: filePath,
};
}
catch (error) {
throw new Error(Tried to fetch file from url ${url} but failed with error: ${error.message});
}
});

So in importFile I add mime as the parameter as it gets added from exportData and updated files object with type: mime instead of getting from response.headers.

files: {
name: file.name,
type: mime,
size: file.size,
path: file.path,
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants