MajedAbdullah

Yeah, I did!

It's been solved. The problem was in the modal Class. Class wasn't found.

I have a project in laravel which one of the sections upload images to the server. Images are saved by using File storage and in the / storage / app / public folder. In local works correctly, the images look good, but when I upload the project to heroku, the images are not seen. Even in heroku run the command "php artisan storage: link"

Why can not I see the images?

In local server it works fine. But in Heroku server it gives server error.

2020-10-14T08:29:05.958083+00:00 app[web.1]: 10.29.86.227 - - [14/Oct/2020:08:29:05 +0000] "GET /image/l
oader/loader.svg HTTP/1.1" 200 817 "http://tranquil-falls-55045.herokuapp.com/services" "Mozilla/5.0 (Wi
ndows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36
2020-10-14T08:29:05.756992+00:00 heroku[router]: at=info method=GET path="/image/loader/default-image.jp
g" host=tranquil-falls-55045.herokuapp.com request_id=62715f42-d7a7-4ae7-a93f-72d057445bba fwd="103.99.2
49.66" dyno=web.1 connect=0ms service=1ms status=200 bytes=7242 protocol=http
2020-10-14T08:29:05.954578+00:00 heroku[router]: at=info method=GET path="/image/loader/loader.svg" host
=tranquil-falls-55045.herokuapp.com request_id=8b2f5220-e7fd-47f0-8dbd-45b49bf5302c fwd="103.99.249.66"
dyno=web.1 connect=5ms service=5ms status=200 bytes=1053 protocol=http
2020-10-14T08:29:06.271552+00:00 heroku[router]: at=info method=GET path="/getServicesList" host=tranqui
l-falls-55045.herokuapp.com request_id=87fe533c-21f7-40bd-b86a-71e31c5eaf3f fwd="103.99.249.66" dyno=web
.1 connect=3ms service=25ms status=500 bytes=13283 protocol=http
2020-10-14T08:29:06.276486+00:00 app[web.1]: 10.29.86.227 - - [14/Oct/2020:08:29:06 +0000] "GET /getServ
icesList HTTP/1.1" 500 12183 "http://tranquil-falls-55045.herokuapp.com/services" "Mozilla/5.0 (Windows
NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36

Hello, I deployed an application on the Heroku server. It adds project successfully but it doesn't show up. It just keeps loading after added. But in the local server, it just works fine. Help, please. Thanks

I have two .env files for BE and FE. Both are accessing the same database.

Hello. I’m new at deploying projects on live server. I have frontend and backend. I’m trying to deploy on heroku server. But I have some confusion. Is there any way to deploy frontend and backend simultaneously? If so, then how? I deployed the backend. But I’m so confuse here. Does the heroku database credentials has to be the same for backend also? Such as name, username, password, port, host, db url and so on. Because frontend and backend access the same database. In the local server I can’t run both in the same port. Does it behave same in the real server? Thanks

Hello. I am looking for a solution here. I want to keep multiple images in a single row.

        if($request->hasFile('files')){
            foreach ($request->file('files') as $file) {
                $files =  $file->store('public');
                $fileName =  (explode('/',$files))[1];
                $host = $_SERVER['HTTP_HOST'];
                $projectImage = 'http://'.$host.'/storage/'.$fileName;
                DB::table('projects')->insert([
                    'project_name' => $addProjectName,
                    'project_des' => $addProjectDes,
                    'project_link' => $addProjectLink,
                    'project_image' => $projectImage,
                    'project_image1' => $projectImage,
                    'project_image2' => $projectImage,
                    'project_image3' => $projectImage,
                    'project_image3' => $projectImage,
                    'project_image5' => $projectImage,
                    'project_image6' => $projectImage,
                    'project_image7' => $projectImage,
                    'project_image8' => $projectImage,
                    'project_image9' => $projectImage,
                    'project_image10' => $projectImage,


                ]);
            }
        }

I want each picture to be inserted on the specific column. But in this case, it creates a new row for each image.

Already tried. It didn’t work. What else can I do?

Hei @niush I have tried that a long time. It didn't work. I have no idea why. Each time I hit the save button it says

The GET method is not supported for this route. Supported methods: POST.

But my route and Axios both have the post method. Route:

Route::post('/addproject', '[email protected]')->middleware('loginMiddleware');

Axios

       axios.post('/addproject', formData,config).
                    then(function (response) {
                        alert(response.data);
                        console.log(response.data);
                        if (response.data == 1) {
                 		//
                        } else {
                               //
                        }

Can you have a look where is the wrong? The input:

                    <input type="file" id="files" name="files[]"  accept="image/*" multiple/>

The method:

               function addProject() {
                    let formData = new FormData();
                    let files = $('#files').prop('files');
                    for(let i = 0 ; i < files.length ; i++){
                        formData.append('files[]', files[i]);
                    }
                    let config = {headers:{
                        'content-type':'multipart/form-data'
                        }
                    }
                    axios.post('/addproject', formData,config).
                    then(function (response) {
                        alert(response.data);
                        console.log(response.data);
                        if (response.data == 1) {
                            alert('Project has been added!');

                        } else {
                            alert('Project failed to add!');
                        }
                    }).catch(function () {

                    });
                }

In the controller:

 function addproject(Request $request)
    {
        $addProjectImage = $request->file('files');
        foreach ($addProjectImage as $file) {
            return $name = (string)Str::uuid() . '.' . $file->extension();
            $file->storeAs('public', $name);
        }

But still, file doesn't store. No matter the Public path or upload path.

Thanks, NUISH. Let me try!

I wanted to make the file separate is because I wanted to add the functionality to edit the specific image.

Yes, I have 11 files from 0-10. Only the first file response me the image name. The rest of them doesn't. It says internal server error in console.

From the first file: public/t9ual5OZrSzZBl3HUNtYQvpYxq2h7tEpXEPXAJN5.png

From the second file: Failed to load resource: the server responded with a status of 500 (Internal Server Error)

There you go

		    let file = $('#inputProjectImage').prop('files')[0];
                    let file1 = $('#inputProjectImage1').prop('files')[0];
                    let file2 = $('#inputProjectImage2').prop('files')[0];
                    let file3 = $('#inputProjectImage3').prop('files')[0];
                    let file4 = $('#inputProjectImage4').prop('files')[0];
                    let file5 = $('#inputProjectImage5').prop('files')[0];
                    let file6 = $('#inputProjectImage6').prop('files')[0];
                    let file7 = $('#inputProjectImage7').prop('files')[0];
                    let file8 = $('#inputProjectImage8').prop('files')[0];
                    let file9 = $('#inputProjectImage9').prop('files')[0];
                    let file10 = $('#inputProjectImage10').prop('files')[0];

Hello. I want to append multiple images. Only the first input produces the picture. and the rest of them doesn't work.

		    let formData = new FormData();
 		    formData.append('file', file);
                    formData.append('file1', file1);
                    formData.append('file2', file2);
                    formData.append('file3', file3);
                    formData.append('file4', file4);
                    formData.append('file5', file5);
                    formData.append('file6', file6);
                    formData.append('file7', file7);

Yes, I am using a browser. Frontend to write a frontend code. And backend to write backend code.

I think you didn't get me. Well, let me explain further. I have a frontend panel and backend panel. When I upload images as an admin, the image stored in the admin panel storage. When you access the frontend then you should be able to see the same image. But Those pictures are not available on the frontend storage. Then how would I display those images? I have only the path stored in the database. Not the file.

Hey. Thanks in advance. I would like to know how to display images from the database. I have added the path to the database. From the backend, I can easily display images because images are stored in the storage. But from the frontend, images can't be displayed .since those images are available in the frontend storage. How would I display images then?

Thanks a lot man

I'm trying to pass an input image and input text into the controller. But I don't know how to pass formData and text input in the axios.post() parameter.

function addProject(addProjectName, addProjectDes, addProjectLink) {
                    let file = $('#inputProjectImage').prop('files')[0];
                    let formData = new FormData();
                    let config = {
                        headers: {'content-type': 'multipart/form-data'}
                    }
                    formData.append('file', file);
                    axios.post('/addproject', formData, config, {
                        addProjectName: addProjectName,
                        addProjectDes: addProjectDes,
                        addProjectLink: addProjectLink,
                    }).then(function (response) {
                        console.log(response.data);
                        if (response.data == 1) {
                            alert('Project has been added!');
                        } else {
                            alert('Project failed to add!');
                        }
                    }).catch(function () {
                        console.log(response.data);
                    });
                }

Thanks

function updateLanguage(Request $request){
        $populateLanguage=      $request->input('populateLanguage');
        //How would I print $populateLanguage variable in console in order to see whether the expected result is coming or not!
        $languageProficiency=   $request->input('languageProficiency');
        return DB::table('language')->where('id','=',$request->id)->update(['language'=>$populateLanguage,'language_proficiency'=>$languageProficiency]);
    }

Thank you, man. It works.

yes

		<select class="form-control mb-4" name="proficiency" id="addLanguageProficiency">
                        <option value="Select">Select Proficiency</option>
                        <option value="Native">Native</option>
                        <option value="Intermediate">Intermediate</option>
                        <option value="Good">Good</option>
                        <option value="Poor">Poor</option>
                </select>

no doesn't work.

My purpose is to get a user row from the database according to the user id.

$('.editButton').click(function () {
        let id = $(this).data('id');
            $('#editId').html(id);
        $('#editModal2').modal('show');
            populateData(id);
        });

Each click on the edit button generates id and pass it to the populateData function.

function populateData(getId) {
        axios.post('/populateData', {
            populateId: getId
        })
            .then(function (response) {
               console.log(response.data);
               console.log(response.status);
                if (response.status == 200) {

                    let data = response.data;
                    $('#status').html(data[0].id);
                    $('#nameId').val(data[0].course_name);
                    $('#courseFee').val(data[0].course_fee);
                    $('#courseClass').val(data[0].course_total_class);
                } else {
                    alert('Failed to retrieve data');
                }
            }).catch(function (error) {

        });
    }

Routes

Route::post('/populateData','[email protected]');

This is the method from controller

  function populateData(Request $req){
        $id = $req->input('populateId');
       return DB::table('courses')->where('id','=',$id)->get();
   }

No!

There u go!

function getSpecificUser(Request  $req){
        $id = $req->input('id');
         return DB::table('courses')->where('id','=',$id)->get();
    }

Still doesn't work😔

Everything works fine. And I'm getting a response status 200. But the value can't be fetched.

//request id $id = $req->input('id');

//Tried both query return DB::where('id','=',$id)->get();

//and this return DB::table('courses')->where('id','=',$id)->get();

but the response results in the console is- [ ] length: 0 proto: Array(0