Toon posts:

Upload knop werkt niet goed asp.net core MVC

Pagina: 1
Acties:

Onderwerpen

Vraag


  • tj.jackel
  • Registratie: Augustus 2014
  • Laatst online: 12-01 13:54
Mijn vraag
Momenteel ben ik bezig met een asp.net core MVC project in Visual Studio. Hierbij heb ik twee objecten:
- Een document object met informatie over een document en bevat een file object.
- Een file object.

Van beide gegevens worden de data opgeslagen in een database.
Van de documenten wordt een lijst gegenereerd met behulp van een for loop. Hierbij worden ook per rij (dus per document) drie knoppen automatisch gegenereerd:
- Edit
- Delete
- Upload file

De edit en delete knop werken allebei. Wanneer op de upload file knop wordt gedrukt opent een verkenner en kan het bestand geselecteerd worden.
Dit roept een javascript functie aan die de data doorgeeft naar een functie in de filecontroller. Het bestand wordt geüpload naar een map op de server.

Ik loop tegen drie dingen aan:
- De upload file knop opent alleen een verkenner bij de eerste rij. Bij andere rijen wordt er geen verkenner geopend. M.b.v. de browser heb ik de gegenereerde HTML vergeleken maar hier zie ik geen verschil.
- Ik probeer het document ID mee te geven aan de javascript functie zodat deze het kan doorgeven naar de controller. De doorgifte van de javascript functie naar de controller werkt. De doorgifte vanaf de html pagina naar de javascript nog niet. Het doorgeven is bedoeld zodat in de controller code het document gekoppeld kan worden aan de file die geupload word.
- De bovenste twee vragen zijn voor nu de belangrijkste. De upload functie zelf werkt ook nog niet helemaal naar behoren. Het maakt wel een bestand aan en de naam wordt ook doorgegeven echter is de bestandsgrote die opgeslagen word nul.

Ik zit al enkele uren te zoeken op het internet maar kom geen stap verder.
Wie o wie kan mij een stukje verder helpen met 1 of meerdere van de vragen?
HTML code for loop:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<table class="table user-list">
            <tbody>
                @foreach (var document in Model)
                {
                    <tr>

                        <td class="text-start" style="width: 20%;">
                            <div style="table-layout:fixed; white-space:pre-wrap">
                                @document.Name
                            </div>
                        </td>

                        <td class="text-center" style="width: 20%;">
                            @document.Source
                        </td>
                        <td class="text-center" style="width: 20%;">
                            @document.Type.Name
                        </td>
                        <td class="text-center" style="width: 20%;">
                            @document.Writer
                        </td>
                        <td class="text-center" style="width: 20%;">
                            <a href="javascript:void(0);" class="anchorEditOrCreate" data-id="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/pencil.svg" alt="Edit" width="24" height="24">
                                </span>
                            </a>

                        
                            <a href="javascript:void(0);" class="anchorDelete" data-id="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/trash.svg" alt="Delete" width="24" height="24">
                                </span>
                            </a>


                            <input type="file" name="attach" id="attach-input" IDDocument="@document.ID" style="display:none" multiple />
                            <a href="javascript:void(0);" class="list-group-item py-1" type="submit" name="attach" id="attach-button" IDDocument="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/upload.svg" alt="Upload" width="24" height="24">
                                </span>
                            </a>


                        </td>
                    </tr>

                }
            </tbody>
        </table>


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var button = $('#attach-button');
    var input = $('#attach-input');
    var IDDocument = 0;
    

    button.on('click', function (e) {
        input.click();
    });

    input.on('change', function (e) {
        var IDDocument = $buttonClicked.attr('IDDocument');
        var files = e.target.files
        var size = 0;
        var fdata = new FormData();
        for (var i = 0; i < files.length; i++) {
            fdata.append("FormFile", files[i]);
            size += files[i].size;
        }
        fdata.append("IDDocument", IDDocument);

        if (size < 31457280) {
            if (files.length > 0) {
                $.ajax({
                    type: "POST",
                    url: "/File/Upload",
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    data: fdata,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response == "Success") {
                            location.reload();
                        }
                        else {
                            alert(response);
                        }
                    }
                });
            }
            else {
                alert('Please select a file.')
            }
        }
        else {
            alert('Max 30MB supported')
        }
        
    })

...

Alle reacties


  • P1nGu1n
  • Registratie: Juni 2011
  • Laatst online: 23:03

P1nGu1n

Developer

Je id's en names zijn niet uniek: https://developer.mozilla...HTML/Global_attributes/id

Je moet deze dus uniek maken, bijvoorbeeld door het document ID eraan toe te voegen. Wat er nu gebeurt is dat de browser op zoek gaat naar een element met id "attach-button", er meerdere vindt en de eerste terug geeft :)

[Voor 51% gewijzigd door P1nGu1n op 20-12-2021 21:14]

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.


  • RobIII
  • Registratie: December 2001
  • Laatst online: 03:33

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

tj.jackel schreef op maandag 20 december 2021 @ 21:02:
Ik zit al enkele uren te zoeken op het internet
Heb je al eens gewoon gedebugged? (Debuggen: Hoe doe ik dat?)

Niet om flauw te zijn, maar dat is natuurlijk stap 1. Controleer je aannames; doet 't wat 't moet doen? Zo nee, waar zit dat.

[Voor 14% gewijzigd door RobIII op 20-12-2021 21:14]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


  • tj.jackel
  • Registratie: Augustus 2014
  • Laatst online: 12-01 13:54
Bedankt voor de snelle reacties. Met debuggen ben ik bekend. Maar als ik de javascript probeer te debuggen lijkt het alsof de functie niet eens wordt aangeroepen. Als ik in de debug mode op edit of delete druk kan ik er stap voor stap doorheen. Druk ik op upload dan gebeurt er niks.

Aan de naam en ID heb ik nu het documentnummer toegevoegd om ze uniek te maken. Dit zie ik ook in de HTML terugkomen. Helaas doet nu geen enkele knop het. Ik dacht dit op te lossen door de functie anders aan te roepen maar dit lijkt ook niet te werken.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(".anchorUploadFile").click(function (e) {
                var $buttonClicked = $(this);
                var IDDocument = $buttonClicked.attr('data-IDDocument');
                var files = e.target.files
                var size = 0;
                var fdata = new FormData();
                for (var i = 0; i < files.length; i++) {
                    fdata.append("FormFile", files[i]);
                    size += files[i].size;
                }
                fdata.append("IDDocument", IDDocument);

                if (size < 31457280) {
                    if (files.length > 0) {
                        $.ajax({
                            type: "POST",
                            url: "/File/Upload",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("XSRF-TOKEN",
                                    $('input:hidden[name="__RequestVerificationToken"]').val());
                            },
                            data: fdata,
                            contentType: false,
                            processData: false,
                            success: function (response) {
                                if (response == "Success") {
                                    location.reload();
                                }
                                else {
                                    alert(response);
                                }
                            }
                        });
                    }
                    else {
                        alert('Please select a file.')
                    }
                }
                else {
                    alert('Max 30MB supported')
                }

            })


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<table class="table user-list">
            <tbody>
                @foreach (var document in Model)
                {
                    <tr>

                        <td class="text-start" style="width: 20%;">
                            <div style="table-layout:fixed; white-space:pre-wrap">
                                @document.Name
                            </div>
                        </td>

                        <td class="text-center" style="width: 20%;">
                            @document.Source
                        </td>
                        <td class="text-center" style="width: 20%;">
                            @document.Type.Name
                        </td>
                        <td class="text-center" style="width: 20%;">
                            @document.Writer
                        </td>
                        <td class="text-center" style="width: 20%;">
                            <a href="javascript:void(0);" class="anchorEditOrCreate" data-id="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/pencil.svg" alt="Edit" width="24" height="24">
                                </span>
                            </a>

                        
                            <a href="javascript:void(0);" class="anchorDelete" data-id="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/trash.svg" alt="Delete" width="24" height="24">
                                </span>
                            </a>


                           
                            <input type="file" name="attach-@document.ID" id="attach-input-@document.ID" style="display:none" multiple />
                            <a href="javascript:void(0);" class="anchorUploadFile" type="submit" name="attach-@document.ID" id="attach-button-@document.ID" data-IDDocument="@document.ID">
                                <span class="fa-stack">
                                    <img src="~/icons/upload.svg" alt="Upload" width="24" height="24">
                                </span>
                            </a>
                            


                        </td>
                    </tr>

                }
            </tbody>
        </table>

  • DJMaze
  • Registratie: Juni 2002
  • Niet online
Heb je dit getest met meerdere bestanden?
JavaScript:
1
2
3
4
                for (var i = 0; i < files.length; i++) {
                    fdata.append("FormFile", files[i]);
                    size += files[i].size;
                }



En wat krijg je als je onderstaand uitvoert en vervolgens op je button klikt?
JavaScript:
1
document.querySelectorAll('a.anchorUploadFile').forEach(node => node.addEventListener('click', e => alert(e.type)));

[Voor 4% gewijzigd door DJMaze op 21-12-2021 10:38]

Maak je niet druk, dat doet de compressor maar


  • tj.jackel
  • Registratie: Augustus 2014
  • Laatst online: 12-01 13:54
DJMaze schreef op dinsdag 21 december 2021 @ 10:37:
Heb je dit getest met meerdere bestanden?
JavaScript:
1
2
3
4
                for (var i = 0; i < files.length; i++) {
                    fdata.append("FormFile", files[i]);
                    size += files[i].size;
                }
Dit heb ik met meerdere pdf bestanden getest. Als ik de code debug wordt wel de lengte van het test bestand (in dit geval test20, 6 characters) doorgegeven en ook de bestandsnaam maar ik zie de inhoud niet terug.

  • DJMaze
  • Registratie: Juni 2002
  • Niet online
Dat kan je zien in de browser debugger.

Lukt het met mijn querySelectorAll test?

Maak je niet druk, dat doet de compressor maar

Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee