arcanist icon indicating copy to clipboard operation
arcanist copied to clipboard

How to upload files?

Open madi-nuralin opened this issue 2 years ago • 5 comments

Hi,

I'm experiencing with this package and I have a trouble with file uploading:

  • In WizardAction I'm reading a file field (e.g. avatar) through $payload and i want to do something like Storage::putFile('avatars', $payload['avatar']); to store file in a local storage, but $payload['avatar'] is always an empty array. How to fix that?

madi-nuralin avatar Jan 24 '22 07:01 madi-nuralin

Hey,

This is more than likely related to you not correctly defining your avatar field within one of your wizard steps.

Fields() - In this method you should define the fields that exist on this step of the form as well as any validation rules that go along with them. In other words, this is how Arcanist knows what data it should save when the step gets submitted.

At the end of each step, Arcanist will save the data if defined within your steps and you will then be able to access this via the $payload variable on the WizardAction.

Provide me with your avatar upload step so I can assist you more.

Thanks

matthewmnewman avatar Jan 24 '22 09:01 matthewmnewman

Thanks for your reply!

I'm working with Inertia.js.

  • The uploading step looks like this:
class ProfileInformationStep extends WizardStep
  public string $title = 'Profile Information';
  public string $slug = 'profile-information';

  public function viewData(Request $request): array
  {
          return $this->withFormData();
  }

  public function fields(): array
  {
          return [
              Field::make('name')
                  ->rules(['required', 'string']),
              Field::make('avatar')
                  ->rules(['required', 'mimes:png,jpg,jpeg']),
          ];
  }
}
  • View
<template>
<input type="text" v-model="form.name" />
<input type="file" @input="form.avatar = $event.target.files[0]" />
</template>
data() {
    return {
        form: this.$inertia.form({
            name: null,
            avatar: null,
        }),
    }
},

methods: {
      submit() {
          this.form.post(this.url);
      },
  },
  • Action class:
class SubmissionAction extends WizardAction
{
    public function execute($payload): ActionResult
    {
         $user = auth()->user();
         $user->name = $payload['name'];
         Storage::putFile('avatars', $payload['avatar']);
         // ....
    }
}

Note:

  1. $payload['name'] is correctly validated and saved;
  2. while $payload['avatar'] is just an empty array, which of course generates exception after Storage::putFile
Call to a member function hashName() on array

madi-nuralin avatar Jan 24 '22 10:01 madi-nuralin

Arcanist doesn’t natively understand how to deal with file uploads. What you want to do in this case is define a transformer for the avatar field and save the file there. Whatever the transform callback returns is what gets saved as part of the wizard’s data.

Field::make('avatar')
    ->rules(['required', 'file', 'mimes:png,jpg,jpeg'])
    ->transform(function (UploadedFile $file) {
        return $file->store('avatars');
    });

Note that this means that the file gets stored when the step gets submitted, not when the wizard is finished. In your action, you would then be able to grab the filename via $payload['avatar'].

ksassnowski avatar Jan 24 '22 10:01 ksassnowski

Thanks a lot! This is what i suspected))

madi-nuralin avatar Jan 24 '22 10:01 madi-nuralin

Hi, It's me again, I'm reopening the issue with the following question: Continuing the topic of loading an avatar: if I need to upload an array of avatars then how to validate array of files?

It seems like it is not enogh to put .* at Field::make('avatars.*')

Field::make('avatars.*')
    ->rules(['required', 'file', 'mimes:png,jpg,jpeg'])
    ->transform(function (UploadedFile $file) {
        return $file->store('avatars');
    });

madi-nuralin avatar Feb 22 '22 08:02 madi-nuralin