Wie beschränke ich Kendo UI Web-Upload Um nur einen einzigen Upload zu ermöglichen?

Question

Ich benutze derzeit Kendo UI zum Hochladen von Dateien in eine DB mit MVC3 und Razor und Entity Framework. Ich habe es in mehreren Bereichen meiner Website gut funktioniert, außer wenn ich es auf das Zulassen eines einzigen Uploads beschränken muss. Ich habe mehrere auf false festgelegt, was mehrere Auswahlmöglichkeiten verbieten muss, aber der Benutzer darf trotzdem beliebig oft auf die Auswahlschaltfläche klicken, um Dateien hinzuzufügen, wodurch die Anforderungen für dieses Feld in der Datenbank verletzt werden.

Ich habe einige Vorschläge ausprobiert, die ich auf ihrer Website gefunden habe, aber sie beziehen sich auf die aktuell ausgewählten Elemente in der aktuellen Anfrage, nicht auf die gesamte Upload-Liste (siehe Bild unten).

<script type="text/javascript"> 
    function singleFile(e) { 
    var files = e.files; 
    if (e.files.length > 1) { 
     alert('Only one file may be uploaded, cancelling operation...'); 
     e.preventDefault(); 
    } 
    } 
</script> 

@(Html.Kendo().Upload() 
    .Name("resumeAttachments") 
    .Multiple(false) 
    .Async(async => async 
     .Save("ResumeSave", "File") 
) 
    .Events(c => c 
     .Upload("resumeOnUpload") 
) 
    .Events(c => c 
     .Success("resumeOnSuccess") 
) 
    .Events(c => c 
     .Complete("singleFile") 
) 
) 

Answer 1

Nach ein wenig über das Wochenende des Denkens (und ein langes Wochenende Urlaub zu entspannen), traf es mich ... die Singlefile-Funktion auf die folgende Änderung wird deaktivieren das Steuerelement nach dem Hochladen der Datei.

function singleFile(e) { 
    var upload = $("#resumeAttachments").data("kendoUpload"); 

    // disables the upload after upload 
    upload.disable(); 
} 

Answer 2

Auch das Hinzufügen:

var dropzone = $(".k-dropzone").addClass("hide"); 

zum Singlefile() Funktion wird die Auswahltaste nach dem Upload verbergen abgeschlossen ist, der sehr realen Eindruck, dass Sie nicht mehr hochladen, da:

.hide { 
    display: none; } 

ist in Ihrem css irgendwo definiert.

Answer 3

Nachdem mir die Anforderung gegeben wurde, mehrere Uploads zu verhindern, bin ich über diese Seite gestolpert.
"mehrere" auf FALSE eingestellt funktioniert gut, wenn es richtig gemacht wird.

(Während Sie die Kendo Razor-Syntax verwenden können, bemerken, wenn Sie die Seite Quelle anzuzeigen, die die .Kendo() zu .kendoUpload wird tatsächlich umgesetzt

So ziehe ich diese Syntax in Javascript (nach dem @using):

@using Kendo.Mvc.UI; 

<script type="text/javascript"> 

$(document).ready(function() { 
    $("#files").kendoUpload({"multiple":false, 
     async: { 
      saveUrl: '@Url.Action("Save", "Upload", new { typeOfUploadedFile= @Model.DocName.ToString(), @proposalNo = @Model.ProposalNo.ToString(), area = ""})', 
      removeUrl: '@Url.Action("Remove", "Upload")', 
      autoUpload: true 
     } 
    }); 
}); 

</script> 

Answer 4

Sie müssen multiple Eigenschaft von Kendo upload Sollwert false;
zum Beispiel @(Html.Kendo().Upload().Multiple(false))