Save two photos, one obligatory and one not laravel

Moreno
January 25, 2024
181 views
0 votes
2 Answers

I’m creating a form where there are 2 image file input fields, one of which must be mandatory and the other not.

I don’t understand what the error could be.

In the database there are 2 fields photo_1 and photo_2

Error 1 = when I upload two photos it only saves 1

Error 2 = when I save one it looks for getClientOriginalExtension() on null on $request->image2

I don’t understand where the problem is

I hope some of you can help me, I’ll post my code below

Front

  <div class="page-anteprima01">
      <span class="testoinput"><span>Anteprima foto 1</span></span>
              <div class="pdca-in-audit-image">
                  <div class="pdca-in-audit-maskgroup">
                           <img alt="Rectangle153433" id="frame" name="image"
                                  src="https://aheioqhobo.cloudimg.io/v7/_playground-bucket-        v2.teleporthq.io_/6d220ad0-19a8-4c9b-bedf-12e9e97db9be/7caf6aaa-10ee-45d1-9492-d791cfa52e45?org_if_sml=12433"
         class="pdca-in-audit-rectangle15 zoom" required />
                                   <div id="nascondi">
                                                <span
    style="color: red; position:relative; top: 25px; left: 106px;">Allega
                                                                    foto</span>
                                                                <label for="file-input">
                                                                    <img alt="Shape3433"
                                                                        src="{{ asset('css/external/shape3433-3lzr.svg') }}"
                                                                        class="pdca-in-audit-shape" />
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

<div id="foto2" class="page-anteprima03" style="display: none;">
        <span class="testoinput"><span>Anteprima foto 2</span></span>
                    <div class="pdca-in-audit-image">
                                                        <div class="pdca-in-audit-maskgroup1">
                                                            <img alt="Rectangle153433" id="frame2" name="image2"
                                                                src="https://aheioqhobo.cloudimg.io/v7/_playground-bucket-v2.teleporthq.io_/6d220ad0-19a8-4c9b-bedf-12e9e97db9be/7caf6aaa-10ee-45d1-9492-d791cfa52e45?org_if_sml=12433"
                                                                class="pdca-in-audit-rectangle15 zoom" />
                                                            <div id="nascondi2">
                                                                <span
                                                                    style="color: red; position:relative; top: 25px; left: 106px;">Allega
                                                                    foto</span>
                                                                <label for="file-input2">
                                                                    <img alt="Shape3433"
                                                                        src="{{ asset('css/external/shape3433-3lzr.svg') }}"
                                                                        class="pdca-in-audit-shape" />
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>


<div class="pdca-in-audit-group4051" style="display: none;">
                                            <span class="pdca-in-audit-text18" style="width: 152px;"><span>Allega foto
                                                    macchina</span></span>
                                            <label for="file-input" class="pdca-in-audit-button1" style="top: 40px;">
                                                <img src="{{ asset('css/external/paperclip3443-xxa4.svg') }}"
                                                    class="crea1-paperclip-1" alt="Allega" />
                                            </label>
                                            <input id="file-input" type="file" name="image"
                                                style="display:none" accept="image/png, image/jpeg, image/jpg" capture
                                                required id="photo" onchange="preview()" />
                                        </div>
                                        <div class="pdca-in-audit-group4051" style="display: none;">
                                            <span class="pdca-in-audit-text18" style="width: 152px;"><span>Allega foto
                                                    macchina</span></span>
                                            <label for="file-input2" class="pdca-in-audit-button1"
                                                style="top: 40px;">
                                                <img src="{{ asset('css/external/paperclip3443-xxa4.svg') }}"
                                                    class="crea1-paperclip-1" alt="Allega" />
                                            </label>
                                            <input id="file-input2" type="file" name="image2"
                                                style="display:none" accept="image/png, image/jpeg, image/jpg" capture
                                                id="photo" onchange="preview2()" />
                                        </div>

Back

$request->validate([
            'image' => 'required|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000',
            $im2 = 'image2' => 'nullable|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000'
        ]);

        $imageName = time() . '.' . $request->image->getClientOriginalExtension();

        $request->image->move(public_path('images/images'), $imageName);

        if (empty($im2)) {
            $imageName2 = NULL;
        } else {
            $imageName2 = time() . '.' . $request->image2->getClientOriginalExtension();

            $request->image2->move(public_path('images/images'), $imageName2);
        };

  <script>
        function preview() {
            frame.src = URL.createObjectURL(event.target.files[0]);
            document.getElementById("nascondi").style.display = "none";
            document.querySelector(".pdca-in-audit-maskgroup").style.borderColor = "transparent";
            document.querySelector(".pdca-in-audit-maskgroup").style.opacity = "10";
        }
    </script>

    <script>
        function preview2() {
            frame2.src = URL.createObjectURL(event.target.files[0]);
            document.getElementById("nascondi2").style.display = "none";
            document.querySelector(".pdca-in-audit-maskgroup1").style.borderColor = "transparent";
            document.querySelector(".pdca-in-audit-maskgroup1").style.opacity = "10";
        }
    </script>

Tags: laravel

Answers

try by testing with this code in the controller:

$request->validate([
            'image' => 'required|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000',
            'image2' => 'nullable|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000'
        ]);
            $imageName = time() . '.' . $request->image->getClientOriginalExtension();
            $request->image->move(public_path('images/images'), $imageName);

            $imageName2 = null;

            if ($request->hasFile('image2')) {
                $imageName2 = time() . '_2.' . $request->image2->getClientOriginalExtension();
                $request->image2->move(public_path('images/images'), $imageName2);
            };

Use sometimes instead of nullable, it might help. Here’s my suggestion for your back code :

    $request->validate([
        'image' => 'required|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000',
        'image2' => 'sometimes|image|mimes:jpg,jpeg,png,bmp,gif,svg,webp|max:8000'
    ]);

    $image1 = $request->file('image');
    $image1Name = time() . '.' . $image1->getClientOriginalExtension();
    $image1->move(public_path('images/images'), $image1Name);

    if ($request->hasFile('image2')) {
        $image2 = $request->file('image2');
        $image2Name = time() . '.' . $image2->getClientOriginalExtension();
        $image2->move(public_path('images/images'), $image2Name);
    }

Please signup or login to give your own answer.

Click here to cancel reply.