Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Miel's avatar
Level 14

Instead of upload a photo save a photo directly

Hi, i know how to use an upload in my Laravel 9 application. But my question is, if it’s possible to make a picture from within the application of a component in a room and then save it directly to a specific folder. Because there will be many photo’s and afterwards uploading is not an option. So par example before and after maintenance in a room is done there will be a photo moment and need to be saved directly. Thanks in advance.

0 likes
3 replies
LaryAI's avatar
Level 58

Yes, it is possible to take a picture from within the application and save it directly to a specific folder. You can use the HTML5 getUserMedia API to access the user's camera and take a picture. Then, you can use the canvas element to manipulate the image and save it to a specific folder on the server.

Here's an example code snippet that demonstrates how to take a picture and save it to a folder:

// Get the user's camera
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // Create a video element to display the camera stream
    var video = document.createElement('video');
    video.srcObject = stream;
    video.play();

    // Create a canvas element to manipulate the image
    var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Take a picture when the user clicks a button
    var button = document.createElement('button');
    button.textContent = 'Take Picture';
    button.addEventListener('click', function() {
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      var dataUrl = canvas.toDataURL('image/jpeg');

      // Send the image to the server
      fetch('/save-image', {
        method: 'POST',
        body: JSON.stringify({ image: dataUrl }),
        headers: {
          'Content-Type': 'application/json'
        }
      });
    });

    // Add the video, canvas, and button elements to the page
    document.body.appendChild(video);
    document.body.appendChild(canvas);
    document.body.appendChild(button);
  })
  .catch(function(error) {
    console.error(error);
  });

In this example, the getUserMedia API is used to get the user's camera stream. Then, a video element is created to display the stream, and a canvas element is created to manipulate the image. When the user clicks the "Take Picture" button, the image is captured from the canvas element and sent to the server using the fetch API.

On the server side, you can use Laravel's Storage facade to save the image to a specific folder. Here's an example code snippet:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Route::post('/save-image', function(Request $request) {
  $image = $request->input('image');
  $filename = 'image.jpg';

  Storage::put($filename, base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $image)));

  return response()->json(['success' => true]);
});

In this example, the Storage::put method is used to save the image to a file named "image.jpg" in the storage folder. The base64_decode function is used to convert the data URL to binary data, and the preg_replace function is used to remove the data URL prefix. Finally, a JSON response is returned to indicate that the image was saved successfully.

Snapey's avatar

Lary. Where is your validation? SHAME ON YOU.

Miel's avatar
Level 14

@Snapey, it's a long time ago but now it's gonna matter to me, so do you maybe have a code example what the best way is and where to put the JavaScript code in my Laravel application? I have a index blade view with component records with at the end a plus button. If i click on the plus button i must take a picture and save it in storage. I use Livewire with Alpinjs and Tailwindcss. I'll also try to find it out myself. Thanks in advantage!

Please or to participate in this conversation.