Git Product home page Git Product logo

Comments (5)

madi-nuralin avatar madi-nuralin commented on June 1, 2024 1

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');
    });

from arcanist.

matthewmnewman avatar matthewmnewman commented on June 1, 2024

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

from arcanist.

madi-nuralin avatar madi-nuralin commented on June 1, 2024

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

from arcanist.

ksassnowski avatar ksassnowski commented on June 1, 2024

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'].

from arcanist.

madi-nuralin avatar madi-nuralin commented on June 1, 2024

Thanks a lot! This is what i suspected))

from arcanist.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.