Filament•2y ago

Issue using FileUpload on filament

When uploading an image, I can save it locally in storage/public. Im able to store pictures on a record when I save, but when I click back on that record (from a row), I dont see the image.

40 Replies

MatthewOP•2y ago

So, despite saving, I cant see the picture I uploaded in the post above Here is the code that is used in the resource:

 public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                Textarea::make('description')
                    ->required()
                    ->maxLength(255),
                TextInput::make('amount_in_euro')
                    ->label("Amount")
                    ->numeric()
                    ->required(),
                Select::make('purchaser')
                    ->label('Purchaser')
                    ->options(User::all()->pluck('name', 'id'))
                    ->searchable(),
                Select::make('status')
                    ->label('Status')
                    ->options(Status::all()->pluck('name', 'id'))
                    ->searchable(),
                FileUpload::make('attachment')
                    ->minSize(1)
                    ->maxSize(1024)
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('description'),
                Tables\Columns\TextColumn::make('amount_in_euro'),
                Tables\Columns\TextColumn::make('user.name'),
                Tables\Columns\TextColumn::make('statusName.name')
                    ->label("Aproval status"),

            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }

 public static function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')
                    ->required()
                    ->maxLength(255),
                Textarea::make('description')
                    ->required()
                    ->maxLength(255),
                TextInput::make('amount_in_euro')
                    ->label("Amount")
                    ->numeric()
                    ->required(),
                Select::make('purchaser')
                    ->label('Purchaser')
                    ->options(User::all()->pluck('name', 'id'))
                    ->searchable(),
                Select::make('status')
                    ->label('Status')
                    ->options(Status::all()->pluck('name', 'id'))
                    ->searchable(),
                FileUpload::make('attachment')
                    ->minSize(1)
                    ->maxSize(1024)
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\TextColumn::make('description'),
                Tables\Columns\TextColumn::make('amount_in_euro'),
                Tables\Columns\TextColumn::make('user.name'),
                Tables\Columns\TextColumn::make('statusName.name')
                    ->label("Aproval status"),

            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }

awcodes•2y ago

What console errors are you seeing?

MatthewOP•2y ago

I am seeing no errors, just no image on the page

awcodes•2y ago

Step one. Verify it’s getting saved correctly to the database for the record.

MatthewOP•2y ago

Can you please elaborate on this?

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('alltrons:expenses', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->double('amount_in_euro');
            $table->bigInteger('purchaser');
            $table->bigInteger('status');
            $table->timestamps();
        });
    }

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('alltrons:expenses', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description');
            $table->double('amount_in_euro');
            $table->bigInteger('purchaser');
            $table->bigInteger('status');
            $table->timestamps();
        });
    }

awcodes•2y ago

Check your database and see if the file path is actually saved to the table.

MatthewOP•2y ago

I know that I should add a string, where its saves the Hash of the name of the picture\ It isnt, at least I doubt that it is

awcodes•2y ago

Check. I need to know if it’s there or not to help further.

MatthewOP•2y ago

No, it is not saved

awcodes•2y ago

Is ‘attachment’ a relationship? Why isn’t it a field on the expense model?

MatthewOP•2y ago

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Expense extends Model
{
    use HasFactory;
    protected $table = "alltrons:expenses";
    protected $fillable = ['name', 'description', 'amount_in_euro', 'purchaser', 'purchaser','status','attachment'];

    // protected $casts = [
    //     'attachments' => 'array',
    // ];

    public function user() {
        return $this->belongsTo(User::class, 'purchaser');
    }
    public function statusName() {
        return $this->belongsTo(Status::class, 'status');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Expense extends Model
{
    use HasFactory;
    protected $table = "alltrons:expenses";
    protected $fillable = ['name', 'description', 'amount_in_euro', 'purchaser', 'purchaser','status','attachment'];

    // protected $casts = [
    //     'attachments' => 'array',
    // ];

    public function user() {
        return $this->belongsTo(User::class, 'purchaser');
    }
    public function statusName() {
        return $this->belongsTo(Status::class, 'status');
    }
}

I will change it from fillable to field

MatthewOP•2y ago

The issue now is that it just keeps loading, but only the filename is saved in the attachment

awcodes•2y ago

Something else is going on. Since you tinker is not showing an attachment field on the model in your screen shot. Is it even a field on your db schema.

MatthewOP•2y ago

It is showing now! I managed to fix it

awcodes•2y ago

Ok that looks right. Make sure your APP_URL is setup correctly in your .env file and you have run php artisan storage:link

MatthewOP•2y ago

yep, those were the first things I did

awcodes•2y ago

Do you have any console errors now. In the browser.

MatthewOP•2y ago

Not any Just the image not loading when I press create or when I click on a record

MatthewOP•2y ago

For example now

awcodes•2y ago

Not sure then. Sorry. Run a search on here. Others have had similar issues in the past.

MatthewOP•2y ago

Okay. Thank you for your help so far

awcodes•2y ago

Surprised there’s no errors. Typically file pond does that when it can’t find the image which usually shows up as console 404s for the image path.

MatthewOP•2y ago

omg I went on a quick rabbit hole

MatthewOP•2y ago

All I had to do, is change the APP_URL It was APP_URL=http://127.0.0.1 which always worked fine I changed it to: APP_URL=http://127.0.0.1:8000 Now it works!

awcodes•2y ago

Lol. Glad you found it.

MatthewOP•2y ago

Another question. The name of the file is a hash, which in my opinion is a good thing. Imagine if 2 people upload 2 files with the same name, then we have a big problem, right? Because we dont know where which file is referenced on that record. There is an option to preserve the file name. Will that create the issue that I mentioned above?

awcodes•2y ago

Also a good reason to use something like valet, sail or homestead so you get an actual domain name instead of having to worry about ports. Technically, yes. What would happen in that case is the newest one coming in would over write the old one. But you can use -> getUploadedFileNameForStorageUsing() to override that to check for the existence of a file first and append something like ‘-1’ etc to it. It’s in the docs.

MatthewOP•2y ago

I think this is a better solution, because from what I understand, the hash will correspond to the original file name

MatthewOP•2y ago

BUt what is attachment_file_names?

awcodes•2y ago

Honestly I’m not sure. I don’t know how that part works. Lol. Probably requires another table column.

MatthewOP•2y ago

well, anyways, I feel like I made very good progress today. I will see again tomorrow. Again, thanks for the help! It does and it preserves the name, it just doesnt rename

awcodes•2y ago

No worries. Glad you got it working.

MatthewOP•2y ago

This is in the form

MatthewOP•2y ago

And is formatted properly

MatthewOP•2y ago

Here is in the table, but I cant find a way to format it in d/m/y

MatthewOP•2y ago

might just make a datepicker at this point

awcodes•2y ago

TextColumn has methods for displaying dates. As long as it’s cast as a date or datetime on the model.

awcodes•2y ago

https://filamentphp.com/docs/2.x/tables/columns/text#date-formatting

Filament

Text column - Columns - Table Builder - Filament

The elegant TALL stack table builder for Laravel artisans.

awcodes•2y ago

Please have a look through the docs. It’ll save you a lot of trouble to at least read through them once and not just look at them on a per case basis.

MatthewOP•2y ago

Yep I actually did. It was my mistake though because I type DateTime, and not DatePicker

Gaming

Programming

Issue using FileUpload on filament