[Feature Request] Media converting

[luismiguelamado]

Hello, First of all, thank you for being so responsive and keeping improving this package. This is the best package for image selection for who uses Expo to build apps.

Thank you for adding the selection limit. :)

I have been running some tests with this package and others and I notice there is one thing that can be improved.

When a user selects a really big picture (let's say a picture of 108MP) with more than 20MB, I believe there should be option to convert the picture to a specific format (PNG, JPG) and respective quality to reduce the file size to the minimum possible while retaining the quality. There could be a set of options to define the final output size.

This is specially important because while uploading images for a server, besides occupies a lot of storage and increase the costs, makes the user experience more poor by taking additional time to upload the images.

I believe once you implement the feature above, this package is now covering all the use cases 👍

Good luck and keep doing the great job you are doing!

[mdjfs]

Hi

Thanks for the feedback!

Is a good idea, meanwhile the picker returns the local URI of the image. I think if you want optimize the image, you need fetch the images first and after process them before upload to server

Probably the only thing what i can do is optimize the render of the image for better user experience

[mdjfs]

Hi! what's up

[luismiguelamado]

Hi there, Sorry the delay, I have been really busy with my job.

I've been thinking how to tackle the problem I mentioned above, and I think I found a easy solution that requires an external library from Expo.

Here is the implementation I did to reduce the size of the images:

import { manipulateAsync, SaveFormat } from "expo-image-manipulator";

const handleOnSavePressed = async (assets) => {

    setPictures(assets);

    //convert assets uri to smaller size and return another uri
    const picturesMap = await Promise.all(
      pictures.map(async ({ id, uri }) => {
        console.log(id, uri);
        const resizedUri = await manipulateAsync(
          uri, //original uri from assets
          [{ resize: { width: 500 } }], //resize to 500px width
          { compress: 0.5, format: SaveFormat.JPEG }
        ); //compress to 50% and save as jpeg
        return {
          id,
          uri: resizedUri.uri, //new uri
        };
      })
    );

Hope it helps :)