semicolon24's avatar

problem upload image with tinymce laravel

I had problems uploading images to tinymce, when uploading images it happened "failed to upload image: HTTP Error 404" but the text input was successful, then how do I overcome this so that I can upload images to tinymce and the images are saved in the folder that I have provide

0 likes
10 replies
Snapey's avatar

im guessing you wrote some code for this....., thats it, im guessing

semicolon24's avatar

@Snapey this javascript tinymce

$(document).ready(function (success) {
tinymce.init({
    selector: "textarea.body",
    height: 450,
    paste_data_images: true,
    image_title: true,
    automatic_uploads: true,
    images_upload_url: "/upload/cp/",
    
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern",
    ],
    toolbar1:
        "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist 																																																																																																																																					 
         outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    
    file_picker_types: "image",
    file_picker_callback: function (cb, value, meta) {
        var input = document.createElement("input");
        input.setAttribute("type", "file");
        input.setAttribute("accept", "image/*");
        input.onchange = function () {
            var file = this.files[0];

            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                var id = "blobid" + new Date().getTime();
                var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                var base64 = reader.result.split(",")[1];
                var blobInfo = blobCache.create(id, file, base64);
                blobCache.add(blobInfo);

                cb(blobInfo.blobUri(), { title: file.name });
            };
            reader.readAsDataURL(file);
        };
        input.click();
    			},
			});
		});
semicolon24's avatar

@Snapey this code Controller:

		public function imgUpload(Request $request) {
			$imgpath = $request->file('file')->store('upload', 'public');
    		return response()->json(['location' => "/storage/$imgpath"]);
						}
semicolon24's avatar

@Snapey this code HTML

	<form action="/mypost/create" method="post" enctype="multipart/form-data">
        	@csrf
			<div class="form-group">
           	<label for="body" class="form-label">Body :</label>
             @error('body')
              <p class="text-danger">{{ $message }}</p>
              @enderror
		<textarea input="body" type="hidden" id="body" name="body" class="form-control body">
			</textarea>
        	</div>
				<button type="submit" class="btn btn-primary">Create Post</button>
     </form>
Snapey's avatar

what do you see happening in the browser network tools

Snapey's avatar

@andreans Introduce yourself to developer tools.

When you inspect an element on the page, there is a tab called network.

There you can see all http requests and the server responses.

Please or to participate in this conversation.