Как получить изображение из FormData в Rails API и сохранить в ActiveStorage

Question

Я пытаюсь отправить объект FormData из моего приложения React Native в мой Rails API. Я использую реагирующий нативный образ-кроп-подборщик, чтобы выбрать изображение из галереи и сохранить объект изображения в моем состоянии:

 ImagePicker.openPicker({
      multiple: true,
      cropping: true,
      includeBase64: true,
      compressImageMaxHeight: 1080,
      compressImageMaxWidth: 1080,
    })
      .then(selectedImages => {
        selectedImages.map(image => {

          let prefix;
          let ext;

          [prefix, ext] = image.filename.split(".");
          ext = ext.toLowerCase() === "heic" ? "jpg" : ext;

          const upload = {
            uri: image.path,
            type: image.mime,
            name: `${prefix}.${ext}`,
          };

          this.setState(prevState => ({
            event: {
              ...prevState.event,
              images: [...prevState.event.images, upload],
            },
          }));        

        });
      })
      .catch(error => {

      });

Затем я создаю объект FormData для отправки в мой Rails API:

 const data = new FormData();

 data.append("name", event.name);
 data.append("description", event.description);
 data.append("date", event.date);
 data.append("time", event.time);
 data.append("images", event.images[0]);

Мой API успешно получает запрос очереди: Parameters: {"event"=>{"_parts"=>[["event[name]", ""], ["event[description]", ""], ["event[date]", ""], ["event[time]", ""], ["event[images]", {"uri"=>"/private/var/mobile/Containers/Data/Application/6226B812-CDEC-4994-A864-0A91EE8C44B3/tmp/react-native-image-crop-picker/BFC043EC-D33F-4E07-BBEA-634CE5DE8A3F.jpg", "type"=>"image/jpeg", "name"=>"IMG_7142.jpg"}]]}}

Теперь, как мне восстановить этот образ и сохранить его непосредственно в моем Rails ActiveStorage? Я пытаюсь напрямую прикрепить объект изображения: {"uri"=>"/private/var/mobile/Containers/Data/Application/6226B812-CDEC-4994-A864-0A91EE8C44B3/tmp/react-native-image-crop-picker/BFC043EC-D33F-4E07-BBEA-634CE5DE8A3F.jpg", "type"=>"image/jpeg", "name"=>"IMG_7142.jpg"} к моей модели, но я получаю текущее исключение: ActiveRecord::RecordNotSaved (Failed to save the new associated avatar_attachment.):

Answer 1

Я вижу, что у вас есть несколько изображений для прикрепления. Если вы уже просмотрели документацию , я полагаю, что вы уже настроили активное хранилище.

В вашей модели у вас есть has_many_attached :images? обратите внимание, что изображения могли быть чем-то другим или просто любым именем.

Мне удалось получить имя изображения, выполнив следующее (но я сомневаюсь, что оно будет работать для ваших целей):

hash = {"uri"=>"/private/var/mobile/Containers/Data/Application/6226B812-CDEC-4994-A864-0A91EE8C44B3/tmp/react-native-image-crop-picker/BFC043EC-D33F-4E07-BBEA-634CE5DE8A3F.jpg", "type"=>"image/jpeg", "name"=>"IMG_7142.jpg"}

hash['uri'].split('/')[-1]

=> "BFC043EC-D33F-4E07-BBEA-634CE5DE8A3F.jpg"

Если вы хотите перейти по вышеуказанному маршрутуи вы уверены, что это будет работать таким образом, тогда вам нужно сделать что-то вроде:

@your_model.images.attach(io: File.open("#{hash['uri']}"), filename: "#{hash['uri'].split('/')[-1]}")

Здесь вы можете найти полное руководство о том, как это на самом деле должно работать здесь - https://medium.com/@ashley_foster/react-native-image-uploads-with-activestorage-ec4898317a82

Попробуйте, и если вы застряли на этом пути, вы можете оставить комментарий или отредактировать / обновить свой вопрос.