I’m trying to use the imgur api to upload images for my personal blog covers, but I just get error after error, I guess I’m doing it wrong.
I’m using Laravel with Livewire 3, below I will show my code
I need help to upload it to my web server.
namespace AppLivewireArticles;
use GuzzleHttpClient;
use AppModelsArticle;
use LivewireComponent;
use IlluminateSupportStr;
use IlluminateHttpRequest;
use LivewireWithFileUploads;
use IlluminateValidationRule;
use IlluminateSupportFacadesAuth;
class ArticleForm extends Component
{
use WithFileUploads;
public Article $article;
public $img;
protected function rules()
{
return [
// 'file' => 'nullable|mimes:jpg,bmp,png',
// 'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
'article.title' => 'required|min:3',
'article.slug' => [
'alpha_dash',
Rule::unique('articles', 'slug')->ignore($this->article),
],
'article.body' => 'required|min:7|max:65,535',
];
}
public function updated($property)
{
$this->validateOnly($property);
}
public function updatedArticleTitle($title)
{
$this->article->slug = Str::slug($title);
}
public function mount(Article $article)
{
$this->article = $article;
}
public function register()
{
$this->validate();
$client = new Client;
$response = $client->img(
'POST',
'https://api.imgur.com/3/image', [
'headers' => [
'Authorization' => 'Client-ID ' . config('services.imgur.client_id'),
],
'form_params' => [
'img' => base64_encode(file_get_contents($img->path())),
'type' => 'base64',
],
]);
$responseBody = json_decode($response->getBody(), true);
if ($responseBody['success']) {
return response()->json([
'message' => 'Image uploaded successfully',
'url' => $responseBody['data']['link'],
]);
} else {
return response()->json([
'message' => 'Failed to upload image',
], 400);
}
Auth::user()->articles()->save($this->article);
session()->flash('msg', __('Article saved'));
return to_route('article.index');
}
public function render()
{
return view('livewire.articles.article-form');
}
}
And in the view I have this
<form wire:submit="register" enctype="multipart/form-data">
<div class="bg-black mb-3 p-5 flex w-full justify-center items-center border border-dashed h-52">
<label for="img" class="cursor-pointer">
Sube la imagen [ jpg, png, svg o gif ]
</label>
<input type="file" wire:model="img" id="img" class="hidden">
</div>
<div>
<x-input-label for="title" :value="__('Title') " class=" text-xl text-amber-300 italic "/>
<x-text-input id="title" wire:model="article.title" class="block mt-3 mb-4 w-full !bg-transparent border-0 text-xl italic border-b-2 rounded-none placeholder:text-white placeholder:text-xl focus:ring-0 focus:border-[#48ee06] border-[#39c9d3]" type="text" placeholder="Escribe el título" :value="old('article.title')" autocomplete="title" />
<x-input-error :messages="$errors->get('article.title')" class="mt-2 text-xl italic" />
</div>
<div class=" ">
<x-input-label for="body" :value="__('Content') " class=" text-xl text-amber-300 italic mt-3 mb-3"/>
<x-panel.textarea placeholder="Escribe el contenido" wire:model="article.body" id="body"></x-panel.area>
<x-input-error :messages="$errors->get('article.body')" class="mt-2 mb-4 text-xl italic" />
</div>
<x-primary-button class="!normal-case italic !text-[1.24rem] rounded-none w-full !p-4 shadow shadow-stone-950">
{{ __('Article saved') }}
</x-primary-button>
</form>
Undefined variable $img
2
Answers
Now I get this error
GuzzleHttpClient::request(): Argument #3 ($options) must be of type array, string given, called in C:LaragonwwwlunavendorguzzlehttpguzzlesrcClient.php on line 92
I think it expects an array or something
$response = $client->img
Inside ArticleForm class, precisely on register function. You should use $this to get img public variable..